javascript - Fetch Request Completes Successfully, but Response Object Empty - Stack Overflow

admin管理员组

文章数量:1356382

I have a fetch request within the ponentDidMount() method of a React ponent:

const request = new Request(url, {
    mode: 'no-cors',
    method: 'get',
    headers: {
        Accept: 'application/json'
    }
});

fetch(request)
    .then(function(response) {  
        console.log('Response: ', response);

        return response.text();  
    })
    .then(function(data) {
        // _this.setState({ data: data });

        console.log('Success: ', data);
        console.log('Request succeeded with JSON response', data);
    }).catch(function(error) {
        console.log('Request failed', error);
    });

When the Component loads, I can see the Request being made in the Console and the proper data being returned; however, my Response object is always empty:

Response { type: "opaque", url: "", redirected: false, status: 0, ok: false, statusText: "", headers: Headers, bodyUsed: false }

response.text() returns null, and I'm really uncertain what is going on. I've used the same method before and not had this problem, so I'm uncertain if it's different because of the third-party data source or what.

Any ideas?

I have a fetch request within the ponentDidMount() method of a React ponent:

const request = new Request(url, {
    mode: 'no-cors',
    method: 'get',
    headers: {
        Accept: 'application/json'
    }
});

fetch(request)
    .then(function(response) {  
        console.log('Response: ', response);

        return response.text();  
    })
    .then(function(data) {
        // _this.setState({ data: data });

        console.log('Success: ', data);
        console.log('Request succeeded with JSON response', data);
    }).catch(function(error) {
        console.log('Request failed', error);
    });

When the Component loads, I can see the Request being made in the Console and the proper data being returned; however, my Response object is always empty:

Response { type: "opaque", url: "", redirected: false, status: 0, ok: false, statusText: "", headers: Headers, bodyUsed: false }

response.text() returns null, and I'm really uncertain what is going on. I've used the same method before and not had this problem, so I'm uncertain if it's different because of the third-party data source or what.

Any ideas?

• javascript
• reactjs
• response
• fetch-api

Share Improve this question Follow edited Sep 5, 2023 at 6:55 VLAZ 29.1k99 gold badges6363 silver badges8484 bronze badges asked May 30, 2017 at 17:48 Eric REric R 71333 gold badges99 silver badges1616 bronze badges 6

• 3 Looks like it might be an issue with the no-cors header. Check this out for more information. stackoverflow./questions/36840396/… – Arnav Aggarwal Commented May 30, 2017 at 17:53
• Thanks, @ArnavAggarwal.I saw that answer, but I'm not using Express. Can I install that without any more dependencies? I did try to use axios, but that just gives me a Network Error with that as well, even though the data loads as before. I've used axios with Vue before for a similar cors problem. – Eric R Commented May 30, 2017 at 19:40
• I should maybe add that I've done a similar API call to the same source in an AngularJS app using Angular's $http.jsonp() method, so I know this can work. – Eric R Commented May 30, 2017 at 19:51
• 2 You need to remove the mode: 'no-cors', as @ArnavAggarwal points out, and as the answer at stackoverflow./questions/36840396/… explains: ` mode: 'no-cors' cause the response to be set to opaque, which your frontend JavaScript code can’t see it—because your browser won’t allow your frontend JavaScript to access the response at all. That’s the purpose of mode: 'no-cors', and by using it, that’s what you’re explicitly telling your browser to do. – sideshowbarker ♦ Commented May 31, 2017 at 0:06
• 2 If the reason you’re using mode: 'no-cors' is because the server doesn’t send the Access-Control-Allow-Origin response header in its responses, then mode: 'no-cors' is not the way to fix that. The only way to fix it properly is to either configure the server to send Access-Control-Allow-Origin response header or else change your frontend JavaScript code to make you request through a proxy instead. stackoverflow./questions/20035101/… – sideshowbarker ♦ Commented May 31, 2017 at 0:10

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 3

I suggest you to follow the ments below the question:

sideshowbarker says

If the reason you’re using mode: 'no-cors' is because the server doesn’t send the Access-Control-Allow-Origin response header in its responses, then mode: 'no-cors' is not the way to fix that. The only way to fix it properly is to either configure the server to send Access-Control-Allow-Origin response header or else change your frontend JavaScript code to make you request through a proxy instead. follow this link...

本文标签： javascriptFetch Request Completes Successfullybut Response Object EmptyStack Overflow