11

I have a fetch request within the componentDidMount() method of a React component:

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?

A1rPun
  • 16,287
  • 7
  • 57
  • 90
Eric R
  • 673
  • 2
  • 9
  • 15
  • 3
    Looks like it might be an issue with the `no-cors` header. Check this out for more information. https://stackoverflow.com/questions/36840396/react-fetch-gives-an-empty-response-body – Arnav Aggarwal May 30 '17 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 May 30 '17 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 May 30 '17 at 19:51
  • 2
    You need to remove the `mode: 'no-cors'`, as @ArnavAggarwal points out, and as the answer at https://stackoverflow.com/questions/36840396/react-fetch-gives-an-empty-response-body/40427882#40427882 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 May 31 '17 at 00: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. https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource/42744707#42744707 – sideshowbarker May 31 '17 at 00:10
  • Thanks, @sideshowbarker. I figured it was a `no-cors` issue, but in the past, I've fixed that by using Axios, that's why I was further confused in this case. I'll check out the proxy option. – Eric R May 31 '17 at 13:53

1 Answers1

3

I suggest you to follow the comments 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...

Abdulbosid
  • 354
  • 1
  • 2
  • 12