Enable CORS in fetch api

Question

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 => {

`Access-Control-Allow-Origin` should be response header, client request is *invalid* — joaner, Jun 25 '18 at 06:58
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. — johntanquinco, Jun 25 '18 at 09:24
What Chrome extension did you use? https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc/ This one? — carloswm85, Dec 14 '21 at 13:35

score 55 · Answer 1 · edited Apr 12 '23 at 13:53

55

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.

edited Apr 12 '23 at 13:53

Jurakin

832
1
5
19

answered Jun 25 '18 at 07:32

Kishan Mundha

2,989
18
26

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. – cbdeveloper Mar 12 '19 at 09: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. – Kishan Mundha Mar 12 '19 at 09:25
4

I think is a typo, it's `no-cors` that returns an opaque response, see https://stackoverflow.com/a/43268098/6324591 – mcjlnrtwcz Feb 11 '21 at 16:17
This answer is wrong on so many levels... – Christian Jun 26 '22 at 21:39
2

@Christian feel free to correct it. – Amesys Nov 24 '22 at 17:21
@Amesys SO guidelines/rules specify improving answers (e.g. fixing typos, syntax highlighting etc), _not correcting the content of the answer_ or changes that affected the meaning. – Christian Nov 24 '22 at 17:42
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 '22 at 17:51

Enable CORS in fetch api

1 Answers1

Linked

Related