Vue-resource: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response

[lephuhai]

I send POST request to other server api and get error

XMLHttpRequest cannot load http://example.com/api/v1/auth. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

After that, I config vue headers like this.

Vue.http.options.xhr = {withCredentials: true}
Vue.http.options.emulateJSON = true
Vue.http.options.emulateHTTP = true
Vue.http.options.crossOrigin = true

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'
Vue.http.headers.common['Content-Type'] = 'application/x-www-form-urlencoded'
Vue.http.headers.common['Accept'] = 'application/json, text/plain, */*'
Vue.http.headers.common['Access-Control-Allow-Headers'] = 'Origin, Accept, Content-Type, Authorization, Access-Control-Allow-Origin'

but, that error has occurred. Can you give me correct config Vue-resouce to fix this problem.

Thanks so much.

[steffans]

The server needs to set the Access-Control-Allow-Origin: * in order to make a cross origin request.

[lephuhai]

@steffans
Sorry, I'm using postman for send request to api. It still work. I don't think problem lies in server?

[rmagnum2002]

@steffans it is the same error that I get from google api for another header:

        url = 'http://maps.googleapis.com/maps/api/geocode/json'
        this.$http.get(url, {
          key: 'apilkey',
          latlng: Cookies.get('location')
        }, {headers: {'X-CSRF-Token': undefined}})

error:
XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/geocode/json?key=apikey&latlng=46.974399299999995,28.851040499999996. Request header field X-CSRF-Token is not allowed by Access-Control-Allow-Headers in preflight response.

Any idea how to fix this? I don't think I will be able to ask google to do changes on their servers :)

[steffans]

@rmagnum2002 Remove the X-CSRF-Token header from your request, as it says in the error message.

[rmagnum2002]

@steffans that's exactly what I did, just forgot to remove the comment. Thank you.

[jgardezi]

I am having similar issues,
The error

XMLHttpRequest cannot load https://myapi.com/dev/data. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

The call that I am making as follows

this.$http.get('https://myapi.com/dev/data').then(response => {
        // get body data
        var point = response.body
        var series = chart.series[0]
        var shift = series.data.length > 20

        // add the point
        chart.series[0].addPoint(point, true, shift)
        // call it again after one second
        setTimeout(this.requestData, 1000)
      }, response => {
        // error callback
        console.log(response.data)
      })

In my main.js file

import VueResource from 'vue-resource'

Vue.use(VueResource)

Vue.http.headers.common['Content-Type'] = 'application/json'
Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'
Vue.http.headers.common['Accept'] = 'application/json, text/plain, */*'
Vue.http.headers.common['Access-Control-Allow-Headers'] = 'Origin, Accept, Content-Type, Authorization, Access-Control-Allow-Origin'

After the above I am still having issues.

Kind regards,
Javed Gardezi

[ijustyce]

I also having the same issues, can anyone tell me the solution, thanks in advance.

[adexphem]

I tried this inside js/bootsrap.js

window.axios.defaults.headers.common = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};

That worked for me after spending more than 4 hours battling with same error.
I'm on Laravel, Vuejs 2.4.2 and using Axios

[PradipShrestha]

@rmagnum2002: I am trying to use angular 2 http to get map data using map api but I am getting error. Could you help me fixing my issue. I am using
return this.http.get(this.url + '?address=' + country + '&key=' + this.apiKey).map(res => res.json());
But I am getting error: Failed to load https://maps.googleapis.com/maps/api/geocode/json?address=Africa&key=AIzaSyCNe8EH83m18N3Eo69_6vFkADar1XOCdFM: Request header field X-XSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response.

[mailnike]

@adexphem worked for me too . Thanks.

[1120972668]

@adexphem Thank you ,it works for me too