How to resolve CORS error in Fetch API js

Question

I want to fetch json from my subdomain (File Hosting Server) , but it gets the following error:

Reason: CORS request did not succeed)

(Reason: CORS header ‘Access-Control-Allow-Origin’ missing

my similar code:

async function getData(url = '', data = {}) {
    const response = await fetch(url, {
    method: 'get',
    mode: 'no-cors',
    headers: {
       'Access-Control-Allow-Origin' : '*'
    },
  });
  return response.json();
}

I add

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

but don't work.

I add

mode: no-cors

to code, fetch file but return response status 0 , mode: 'opaque'.

please help me.

Does this answer your question? [Enable CORS in fetch api](https://stackoverflow.com/questions/51017702/enable-cors-in-fetch-api) — evolutionxbox, Jul 19 '21 at 15:53
You need to add those headers to the server response at `url`, you can't do it from the fetch request. — James, Jul 19 '21 at 15:56
You have to set this header at server in the response. Not in the request. 'Access-Control-Allow-Origin' : '*' — Manish Kumar, Jul 19 '21 at 16:15

S. Ber Rosenberg · Answer 1 · 2022-05-23T19:56:45.450

3

if your host a PHP file file what you went to call in a other PHP file you will need lot of times to add this code in the PHP file thet you want to call at line_2

header("Access-Control-Allow-Origin: *");

edited May 23 '22 at 19:56

answered Nov 16 '21 at 20:07

S. Ber Rosenberg

97
12

score 2 · Answer 2 · answered Jul 19 '21 at 16:14

I believe you know what you are trying to achieve here. Fetch with CORS use case is very tricky. CORS is driven by server settings. All the headers ACCESS-CONTROL-* are set at the server end.

Access-Control-Allow-Origin is for CORS, and the client honor this header when dealing with the cross-origin request. The server sends this header in the response. From the server end, you have to pass this header. In your response, you have to pass this header.

Access-Control-Allow-Origin: *

Or if you are dealing with credentials (Wild card not supported here):-

Access-Control-Allow-Origin: https://foo.example

Reference:-

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

score 1 · Accepted Answer · answered Jul 19 '21 at 16:19

1

CORS is configured through server-side, so you need to configure on your File Hosting Server

answered Jul 19 '21 at 16:19

Vengleab SO

716
4
11

How to resolve CORS error in Fetch API js

3 Answers3