javascript - Can't fetch data with fetch API - Stack Overflow

admin管理员组

文章数量:1336181

I can't get the fetch() API to work. I get the strong feeling I'm doing something incorrectly.

I have a simple express server running on PORT 3005, which return data in json format, and a react.js client running on PORT 3000.

I'm using fetch() to make a GET request to http://localhost:3005/api but am getting these messages on the console

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3005/api. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

TypeError: NetworkError when attempting to fetch resource.

I added a header and read through similar questions but I still can't get it to work, and I'm still getting the same messages.

What am I doing wrong? (Here's the code)

let url = 'http://localhost:3005/api';
    fetch(url, { 
      method: 'GET',
      headers:{
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials':true,
        'Access-Control-Allow-Methods':'POST, GET'
      }
    }).then(response => response.json)
    .then(data => console.log(data))

I've run into this issue several times in the past, and usually just use axios. But this time, I want to get fetch() to work...!

I can't get the fetch() API to work. I get the strong feeling I'm doing something incorrectly.

I have a simple express server running on PORT 3005, which return data in json format, and a react.js client running on PORT 3000.

I'm using fetch() to make a GET request to http://localhost:3005/api but am getting these messages on the console

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3005/api. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

TypeError: NetworkError when attempting to fetch resource.

I added a header and read through similar questions but I still can't get it to work, and I'm still getting the same messages.

What am I doing wrong? (Here's the code)

let url = 'http://localhost:3005/api';
    fetch(url, { 
      method: 'GET',
      headers:{
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials':true,
        'Access-Control-Allow-Methods':'POST, GET'
      }
    }).then(response => response.json)
    .then(data => console.log(data))

I've run into this issue several times in the past, and usually just use axios. But this time, I want to get fetch() to work...!

• javascript
• reactjs
• cors
• fetch

Share Follow edited Feb 9, 2018 at 19:47 Oswin Noetzelmann 9,55511 gold badge3434 silver badges4646 bronze badges asked Feb 9, 2018 at 19:38 jsdev17jsdev17 1,11033 gold badges1616 silver badges2525 bronze badges 1

• Those headers should be sent from the server to the client, not from the client to the server. – Fred Commented Jun 4, 2018 at 14:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Your server endpoint needs to support the Access-Control-Allow-Origin Header, not just the client.

The general flow is:

1. The client is doing a pre-flight request to check if the requested cors policy is supported by the server.

2. The server receives the pre-flight and answers with the right header when it deems the request allowed.

3. The client receives the answer and by the included headers knows if it is allowed the actual request.

4. (In your case) When the Header is not returned by the server, the browser will not allow the actual call and give the error you are experiencing.

So in order to solve it you need to modify the server code to return the correct Header for the preflight request.

Also see this stackoverflow answer.

See this link. Specifically look at the section about Preflight Requests.

本文标签： javascriptCan39t fetch data with fetch APIStack Overflow