javascript - How to resolve CORS error in Fetch API js - Stack Overflow

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.

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.

• javascript
• cors
• fetch-api

Share Improve this question Follow edited Apr 12, 2024 at 18:27 VLAZ 29.1k99 gold badges6363 silver badges8484 bronze badges asked Jul 19, 2021 at 15:41 Mahsa azMahsa az 8111 gold badge11 silver badge55 bronze badges 4

• 1 Please add the actual fetch code as a minimal reproducible example? – evolutionxbox Commented Jul 19, 2021 at 15:42
• Does this answer your question? Enable CORS in fetch api – evolutionxbox Commented Jul 19, 2021 at 15:53
• 1 You need to add those headers to the server response at url, you can't do it from the fetch request. – James Commented Jul 19, 2021 at 15:56
• You have to set this header at server in the response. Not in the request. 'Access-Control-Allow-Origin' : '*' – Manish Kumar Commented Jul 19, 2021 at 16:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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: *");

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/en-US/docs/Web/HTTP/CORS

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

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