58

I am getting the following error message that unable me to continue

Failed to load https://site/data.json: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' 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. localhost/:1 Uncaught (in promise) TypeError: Failed to fetch

I am trying to enable CORS in my react js file but I was not able to get the expected result. I have installed a chrome extension and it work. But to use this in production site, I need to enable it inside my code. How should I properly arrange the code to enable the CORS.

fetch(URL, {
  mode: 'cors',
  headers: {
    'Access-Control-Allow-Origin':'*'
  }
})
  .then(response => response.json())
  .then(data => {
5
  • 21
    CORS must be handled server-side. Jun 25, 2018 at 6:57
  • 2
    Access-Control-Allow-Origin should be response header, client request is invalid
    – joaner
    Jun 25, 2018 at 6:58
  • 2
    I think CORS can be enabled in client-side too. Jun 25, 2018 at 7:21
  • 1
    hm, so with the error message above, according to the link posted, it seems like the Access-Control-Allow-Origin must be enabled from https://site/: and not in my http://localhost:8080. If I understand it in simplicity. Jun 25, 2018 at 9:24
  • What Chrome extension did you use? chrome.google.com/webstore/detail/moesif-origin-cors-change/… This one?
    – carloswm85
    Dec 14, 2021 at 13:35

1 Answer 1

47

Browser have cross domain security at client side which verify that server allowed to fetch data from your domain. If Access-Control-Allow-Origin not available in response header, browser will disallow to use response in your JavaScript code and throw exception at network level. You need to configure cors at your server side.

You can fetch request using mode: 'no-cors'. In this situation browser will not throw execption for cross domain, but browser will not give response in your javascript function.

So in both condition you need to configure cors in your server or you need to use custom proxy server.

7
  • 2
    What if I'm trying to scrape Google results? Like, I want to request https://www.google.com from my client code and parse the results. Is it possible? I'm getting the same error that he was getting. Does it mean that google.com does not allow CORS requests to its main search page? Thanks. Mar 12, 2019 at 9:22
  • 9
    If you want to fetch any other server like google or facebook and that server doesn't provide access, you might need a server to handle this. In server you can fetch response from google and send back to client. Mar 12, 2019 at 9:25
  • 4
    I think is a typo, it's no-cors that returns an opaque response, see stackoverflow.com/a/43268098/6324591
    – mcjlnrtwcz
    Feb 11, 2021 at 16:17
  • 2
    @Christian feel free to correct it.
    – Amesys
    Nov 24, 2022 at 17:21
  • 3
    @Christian agreed but nothing prevents you from issuing your own answer, and given your 1st reply I'm sure it would bring something interesting to this topic (not being sarcastic here).
    – Amesys
    Nov 24, 2022 at 17:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.