Question

我是Vuejs 2的新手，目前正在做一个项目。我使用 vuetable-2 在 Vuejs 2 中形成数据表。

我目前遇到的问题是我无法使用属性api-url，vuetable-2检索数据。

但是，我可以使用Axios和Global Axios默认配置（将令牌传递到每个请求标头）从服务器检索数据。

上图显示了2个部分：
1.使用vuetable-2的api-url [错误403的一个，禁止]
2.使用Axios GET请求[成功检索数据]

Vuetable-2 api-url（api调用服务器）：

  <vuetable
    ref="vuetable"
    api-url="http://localhost:3000/api/staffs"
    :http-options = "httpOptions"
    :load-on-start = "loadOnStart"
    :fields="['userId', 'name', 'username']"
  ></vuetable>

Axios的全局默认配置：

// Global axios default (config default that will be applied to every request)
var accessToken = window.localStorage.getItem('access_token')
axios.defaults.baseURL = 'http://localhost:3000/'
axios.defaults.headers.common['x-access-token'] = accessToken

我错过了什么吗？： - /

Answer 1

我只能假设推送请求时Vuetable会覆盖Axios标头。您可以使用以下格式将它们提供给vueTable：

  <vuetable
    ref="vuetable"
    api-url="http://localhost:3000/api/staffs"
    :http-options="{ headers: { 'x-access-token' : accessToken } }"
    :load-on-start = "loadOnStart"
    :fields="['userId', 'name', 'username']"
  ></vuetable>

Answer 2

来自vuetable的源代码http://cdn.jsdelivr.net/vue.table/1.5.3/vue-table.js （您可以搜索关键字＆＃39; loadData＆＃39;以找到该地点。）

我们可以知道它正在使用this.$http.get(url, this.httpData, this.httpOptions).then(function (response) { 从服务器检索数据。

所以我敢说你为axios配置的标头不适用于vuetable，你能检查一下vuetable发送的请求标头的内容吗？

我的意思是http://localhost:3000/api/staffs?sort=&XXX

无法在Vuejs 2中使用vuetable-2检索数据

2 个答案: