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.

Please add the actual fetch code as a minimal reproducible example? — evolutionxbox
– evolutionxbox, Commented Jul 19, 2021 at 15:42
You need to add those headers to the server response at url, you can't do it from the fetch request. — James
– 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
– Manish Kumar, Commented Jul 19, 2021 at 16:15

S. Ber Rosenberg · Accepted Answer · 2022-05-23 19:56:45Z

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, 2022 at 19:56

answered Nov 16, 2021 at 20:07

S. Ber Rosenberg

10714 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manish Kumar · Accepted Answer · 2021-07-19 16:14:57Z

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

Vengleab SO · Accepted Answer · 2021-07-19 16:19:28Z

1

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

answered Jul 19, 2021 at 16:19

Vengleab SO

8165 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to resolve CORS error in Fetch API js

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related