CORS error even after setting Access-Control-Allow-Origin on client side

问题

I have a Vue application generated with webpack-simple option. I am trying to make a GET request to https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en but I get the 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 have added:

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'

That has no effect.

I also added this in the devServer option in the webpack.config.js:

devServer: {
  historyApiFallback: true,
  noInfo: true,
  headers: {
    "Access-Control-Allow-Origin": "*"
  }
}

That isn't solving the problem either; the error message remains the same.

How to go about solving this?

回答1:

Access-Control-Allow-Origin is a response header the server the request goes to must send.

But https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en doesn’t send the Access-Control-Allow-Origin header — so you need to instead make the request through a proxy. Do that by changing your frontend JavaScript code to instead use this URL:

https://cors-anywhere.herokuapp.com/https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en

Try that and your frontend code will work as expected. But make sure you first also remove this:

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'

That is adding the Access-Control-Allow-Origin header to the request, as a request header. But as mentioned above, Access-Control-Allow-Origin is a response header. So the only effect you’re having by adding Access-Control-Allow-Origin to the request is that you’re triggering your browser to send a CORS preflight OPTIONS request rather than sending your GET.

And incidentally you can also remove this:

headers: {
  "Access-Control-Allow-Origin": "*"
}

All that seems to be doing is to add the Access-Control-Allow-Origin response header to responses from your own server backend. But the request your frontend code is making isn’t going to your own server backend—instead it’s going to https://api.forismatic.com/.

Anyway, the https://cors-anywhere.herokuapp.com/https://api.forismatic.com/… URL will cause the request to go to https://cors-anywhere.herokuapp.com, a open/public CORS proxy which sends the request on to https://api.forismatic.com/api/1.0/?method=getQuote….

And when that proxy gets the response, it’ll take it and add the Access-Control-Allow-Origin response header to it and then pass that back to your requesting frontend code as the response.

That response with the Access-Control-Allow-Origin response header is what the browser sees, so the error message the browser is showing you now goes away, and the browser allows your frontend JavaScript code to access the response.

Or use the code from https://github.com/Rob--W/cors-anywhere/ or such to set up your own proxy.

The reason you need a proxy is, https://api.forismatic.com/api/1.0/?method=getQuote… itself doesn’t send the Access-Control-Allow-Origin response header, so your browser will refuse to let your frontend JavaScript code access a response from that server cross-origin.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has more details.

来源：https://stackoverflow.com/questions/44232370/cors-error-even-after-setting-access-control-allow-origin-on-client-side