CORS issue with Vue.js
You face this error when the API url and client url aren't the same. Vue CLI 3 (and in the core of it, Webpack) allows you to proxy your API url to your client url.
Inside vue.config.js
file add following lines:
// vue.config.jsmodule.exports = { // options... devServer: { proxy: 'https://mywebsite/', }}
And then send your ajax calls to http://localhost/api/
.
You can read the full article here:How to deal with CORS error on Vue CLI 3?
While you can add Access-Control-Allow-Origin: *
to your server response (in this case IIS) but this is very much advised against.
What's happening here is that your client is http://localhost
and it is trying to access https://mywebsite/api/
which means they're not from the same origin
If you add Access-Control-Allow-Origin: *
you will be allowing the entire world to hit your API endpoint.
I'd suggest making your access control server headers Access-Control-Allow-Origin: *.mysite
and make a vhost for your localhost
to use dev.mysite
or similar.
This will allow your "localhost" to access your API without issues.
You could also add localhost
to a whitelist, but this is also not without its own security implications, and it doesn't work everywhere anyway.
So, in short, make a vhost for your localhost that's in the same domain as your REST service and your issue should be resolved.
Once you go live you should remove the *.mysite
part and use as specific a domain as possible on your whitelist.
Good luck!
1) Be sure that server sends Access-Control-Allow-Origin "*"
header.
2) Vue.http.headers.common['Access-Control-Allow-Origin'] = true
, Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'
and etc. don't needed in the client request.
3) Vue.http.options.emulateJSON = true
should helps if 1 and 2 points already are ok, but vue-resource fails with status 0
. Also, try to remove (if they exist) Vue.http.options.credentials = true
andVue.http.options.emulateHTTP = true
.