3

I have been playing with React using WebStorm and when I try and fetch from an API I keep getting the error below:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

To fix this, I originally installed the JetBrains Debug IDE Chrome Extension which provides an option to force CORS. When this is set to * or http://localhost:3000 I continue to get the CORS error (sporadically, occasionally it worked.) I've also tried installing the Chrome Extension Allow-Access-Control-Origin: * which fixed the error for a while, but when I restarted my computer I started getting the error again.

At this point, I started trying every combination possible with both plugins. I disabled one and tried the other, I switched the headers to use http://localhost:3000 and then http:///, etc. Again, it worked at times but later I would start getting the error again.

And just when I decided to record the error and post here, I realized that the response to the request being made shows the headers are present! Here is a recording of the request and its headers:

http://recordit.co/QPd1rhiKrr

I can't figure this out and it only happens on localhost, when I load the URL in Chrome it works fine.

Anyone mind pointing me in the right direction? I'm sure it's related to my lack of knowledge of CORS

Blake Bell
  • 376
  • 5
  • 16
  • 1
    You recorded the response to the "inflatableoffice" request. The error you're getting is about the server at `localhost:3000`. – Pointy Aug 15 '18 at 22:43
  • 1
    See the *How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems* section of the answer at https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141 – sideshowbarker Aug 16 '18 at 02:25
  • @Pointy The problem is the request to inflatable office is being made from localhost:3000, which the browser prevents. The recording shows that the header Access-Control-Allow-Origin is set to * which should make it work. Also, I've tried the heroku and the cors-everywhere proxies but another issue arose with a separate API I'm using and it won't work with that. – Blake Bell Aug 16 '18 at 18:41

0 Answers0