3

In a ReactJS Component, a fetch call to an API that redirects to another API won't return the final destination's response. Fetch simply returns opaque response with null 0 etc as if your call failed. It doesn't even say it redirected. But in Chrome's console, the Network tab clearly showed the redirected call succeeded. 

            let call = fetch(encodedQueryUrl, {
                method: 'GET',
                cache: 'no-cache',
                mode: 'no-cors',
                redirect: 'follow',
                credentials: 'same-origin'
            }).then((response) => {
                console.log("Response???", response);
                return response;
            });

So encodedQueryURL Response Headers:

Request Method: GET
Status Code: 302 
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: access-control-allow-origin
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
content-length: 0
content-type: text/html; charset=UTF-8

And the 302 Response headers:

Request Method: GET
Status Code: 200 
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: access-control-allow-origin
access-control-allow-methods: GET, POST, GET, OPTIONS, PUT, DELETE
access-control-allow-origin: *
content-type: application/json; charset=UTF-8
ericjam
  • 1,501
  • 2
  • 20
  • 30
  • From which URL did you get redirected to what target URL? – Bergi Jan 28 '19 at 17:36
  • It's an internal API so I can't share it but are you suggesting it's possible there is a server related issue here not front-end – ericjam Jan 28 '19 at 17:44
  • No, I'm suggesting that you are not allowed to see the response because of different domain or something – Bergi Jan 28 '19 at 17:46

1 Answers1

5

Because you're using mode: no-cors, you're obtaining an opaque response. This happens as a security mechanism, because you're avoiding CORS validation. So, to make it secure, the content of the response is not accessible from JS code, it only can be used for caching purpose.

UPDATE: As I can understand, probably you used no-cors because you're having issues with CORS, as you said, because you're consuming the resource from another domain, different to the domain of the API.

For achieving this, you will need either to:

  • Modify your API to add the domain in which your frontend app is running, to the list of approved origins so you are able to consume the API or
  • Having your frontend app running in the same server as your API
dm_tr
  • 4,265
  • 1
  • 6
  • 30
Oscar Calderon
  • 883
  • 2
  • 13
  • 30