All requests blocked by CORS policy on development

Question

I have a Rails API with a React client side. I have had everything in the app setup for a long time now and today while I was working on it I suddenly started getting the error:

Access to XMLHttpRequest at 'http://localhost:3000/api/v1/user/authed'
from origin 'http://localhost:8000' has been blocked by CORS policy: 
The value of the 'Access-Control-Allow-Origin' header in the response 
must not be the wildcard '*' when the request's credentials mode is 
'include'. The credentials mode of requests initiated by the 
XMLHttpRequest is controlled by the withCredentials attribute.

Now none of the requests in my application work at all.

The request does go through from the React app to the Rails API and the Rails API responds properly as well (I can see this in the terminal) but nothing actually happens on the Client side because I am assuming it gets blocked for the CORS reason.

Is there something I can do to fix this? Could it be that some package is somehow updated on my system and different from the project so now it breaks?

URL to make request to:

const ENDPOINT = '/api/v1',
      PORT = 3000,
      URL = window.location.protocol + '//' + window.location.hostname + ':' + PORT + ENDPOINT;

The request

$.ajax({
  url: URL + '/' + resource,
  type: verb,
  data: params,
  xhrFields: { withCredentials: true }
})
  .done(callback)
  .fail(errcallback);

Request functions have the format:

static get(resource, params, callback, errcallback) {
  API.send('GET', resource, params, callback, errcallback);
}

@emaillenin I moved to the master branch in the repository so that I could start fresh. Deleted the `Gemfile.lock` and `package.json.lock` and ran `bundle install` and `npm install` to start fresh but it's still coming up. That's why I am confused about how to solve this. — anonn023432, Dec 10 '18 at 22:57
Have you tried removing `xhrFields: { withCredentials: true }`? Or setting `Access-Control-Allow-Origin` to `localhost:8000`? — wdm, Dec 10 '18 at 23:18
It works on removing `xhrFields: { withCredentials: true }`. Do you know why? Also, if you write the explanation in an answer form then I will accept it — anonn023432, Dec 10 '18 at 23:24
You should add CORS in response headers Please check below link: https://stackoverflow.com/questions/17858178/allow-anything-through-cors-policy — Paritosh Singh, Dec 11 '18 at 05:26
You should add CORS in response headers Please check below link: https://stackoverflow.com/questions/17858178/allow-anything-through-cors-policy — Paritosh Singh, Dec 11 '18 at 05:27

score 2 · Accepted Answer · answered Dec 10 '18 at 23:39

If your API doesn't require credentials you should remove withCredentials: true.

More about withCredentials:

The XMLHttpRequest.withCredentials property is a Boolean that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. Setting withCredentials has no effect on same-site requests.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

All requests blocked by CORS policy on development

1 Answers1