关于vuejs2：在Vuejs 2中无法从使用vuetable-2检索数据


Unable to retrieve data from using vuetable-2, in Vuejs 2

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

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

但是，我可以通过使用Axios和全局Axios默认配置(将令牌传递到每个请求标头中)从服务器检索数据。

错误图片

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

Vuetable-2 api-url(对服务器的api调用)：

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

Axios的全局默认配置：

1
2
3
4
// 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

我错过了什么吗？ ：-/

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

1
2
3
4
5
6
7
  <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>

来自vuetable的源代码http://cdn.jsdelivr.net/vue.table/1.5.3/vue-table.js
(您可以搜索键workd'loadData'来找到位置。)

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

所以我只是敢为axios配置的标头不适用于vuetable，您可以检查vuetable发送的请求标头的内容吗？

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

相关讨论