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

Question

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

我目前面临无法使用属性 api-url、vuetable-2 检索数据的问题。

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

---

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

我错过了什么吗？ :-/

Answer 1

我只能假设在推送请求时 Axios header 被 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>