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

问题描述

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

I'm new to Vuejs 2 and currently doing a project. I'm using vuetable-2 to form a datatable in Vuejs 2.

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

I'm currently facing a problem by which I'm unable to retrieve data using the property, api-url, vuetable-2.

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

However, I'm able to retrieve data from server by using Axios and the Global Axios Default Configs (to pass the token into every request headers).

错误图片

上图显示了 2 个部分:
1.使用vuetable-2的api-url【403错误，禁止访问】
2.使用Axios GET请求【成功检索数据】

This image above shows 2 sections:
1. Using vuetable-2's api-url [The one with Error 403, Forbidden]
2. Using Axios GET request [Successfully retrieve data]

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

Vuetable-2 api-url (api call to server):

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

Axios 的全局默认配置:

Axios's Global Default Configuration:

// 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

我错过了什么吗?:-/

Am I missing out on anything? :-/

推荐答案

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

I can only assume the Axios headers are overwritten by Vuetable when pushing the request. You can provide them to vueTable using following format:

  <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>

这篇关于在 Vuejs 2 中无法使用 vuetable-2 检索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！