VueJS CORS problem using vue resource with webpack-simple dev-server
I have a Vue app generated with an option webpack-simple
. I am trying to make a request GET
https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en
, but I am getting an error:
XMLHttpRequest cannot load https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.
I am using vue-resource and added:
Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'
It has no effect.
I also added this to an option devServer
in webpack.config.js
:
devServer: {
historyApiFallback: true,
noInfo: true,
headers: {
"Access-Control-Allow-Origin": "*"
}
}
That doesn't solve the problem either; the error message remains unchanged.
How to solve this?
source to share
Access-Control-Allow-Origin
is the header of the response to which the request sent is sent.
https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en
however does not send the response header Access-Control-Allow-Origin
, so you need to make the request through the proxy. Do this by changing your external JavaScript code to use this URL instead:
https://cors-anywhere.herokuapp.com/https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en
Give it a try and your external code will work as expected. But first make sure you remove this:
Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'
This adds a header Access-Control-Allow-Origin
to the request like the request header. But as mentioned above Access-Control-Allow-Origin
is the response header. So the only effect you've added to the request Access-Control-Allow-Origin
is that you trigger your browser to send the CORS preview requestOPTIONS
, rather than sending yours GET
.
And by the way, you can also remove this:
headers: {
"Access-Control-Allow-Origin": "*"
}
All that appears to be is adding a response header Access-Control-Allow-Origin
to responses from your own server. But the request your external code makes does not go to your own backend server, instead it goes to https://api.forismatic.com/
.
Either way, the URL https://cors-anywhere.herokuapp.com/https://api.forismatic.com/…
will force the request to go to the https://cors-anywhere.herokuapp.com
open / open CORS proxy that is sending the request to https://api.forismatic.com/api/1.0/?method=getQuote…
.
And when that proxy receives a response, it will take it and add a response header to it Access-Control-Allow-Origin
, and then pass it back to your requesting interface code as a response.
This response with a response header Access-Control-Allow-Origin
is what the browser sees, so the error message shown by the browser now disappears and the browser allows your JavaScript code interface to access the response.
Or use the code https://github.com/Rob--W/cors-anywhere/ or such to set up your own proxy.
The reason you need a proxy is because https://api.forismatic.com/api/1.0/?method=getQuote…
it doesn't send the response header itself Access-Control-Allow-Origin
, so your browser will refuse to let your external JavaScript code receive a response from that cross-origin server.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has more details.
source to share