3

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

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

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

Error Image

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 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'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? :-/

mary
  • 121
  • 3
  • 12

2 Answers2

2

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>
Frederiek
  • 1,653
  • 1
  • 16
  • 27
-1

from the vuetable's source code http://cdn.jsdelivr.net/vue.table/1.5.3/vue-table.js (you can search the key workd 'loadData' to locate the place.)

we can know that it is using this.$http.get(url, this.httpData, this.httpOptions).then(function (response) { to retrieve data from server.

So I just dare that the headers which you have configured for axios does not work for vuetable, could you check the contents of the request header sent by vuetable ?

I mean http://localhost:3000/api/staffs?sort=&XXX

jg_huo
  • 34
  • 2
  • Maybe you can refer to this question to add interceptors for your vuetable's request https://stackoverflow.com/questions/39665244/vue-resource-interceptor-for-auth-headers – jg_huo Jun 23 '17 at 09:07