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

【问题标题】：Unable to retrieve data from using vuetable-2, in Vuejs 2无法在 Vuejs 2 中使用 vuetable-2 检索数据
【发布时间】：2017-11-26 03:21:01
【问题描述】：

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

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

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

Error Image

上图显示了 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

我错过了什么吗？ :-/

【问题讨论】：

标签： vuejs2

【解决方案1】：

来自 vuetable 的源代码http://cdn.jsdelivr.net/vue.table/1.5.3/vue-table.js （您可以搜索 key workd 'loadData' 来定位该地点。）

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

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

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

【讨论】：

也许你可以参考这个问题为你的vuetable的请求添加拦截器stackoverflow.com/questions/39665244/…

【解决方案2】：

我只能假设 Axios 标头在推送请求时被 Vuetable 覆盖。您可以使用以下格式将它们提供给 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>

【讨论】：