Fetch rejects promise on 404 responses instead of resolving with 404 status

Question

I'm trying to figure out how to process failed http responses in the fetch example in reason-react-example repo.

The following was my first idea (tinkering with the url):

Js.Promise.(
          Fetch.fetch("https://dog.ceo/api/breeds/list")
          |> then_(res => {
               let ok = Fetch.Response.ok(res);
               ok ?
                 Fetch.Response.json(res) :
                 Js.Exn.raiseError(Fetch.Response.statusText(res));
             })
          |> then_(json =>
               json
               |> Decode.dogs
               |> (dogs => self.send(DogsFetched(dogs)))
               |> resolve
             )
          |> catch(err => {
               Js.log(err);
               [%bs.raw {| console.log(err.response) |}]
               Js.Promise.resolve(self.send(DogsFailedToFetch));
             })
          |> ignore
        );

It's not working as I hoped. It turns out Fetch rejects right away when the HTTP request fails with 404 for instance, which I didn't expect since it's not how the browser fetch API works. Moreover, when err is logged it's TypeError: Failed to fetch and the err.response property is undefined.

My question is: how to process the error to get the status code and status text for example?

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

The problem is CORS. The server you're using will include an Access-Control-Allow-Origin: * header with 2xx responses, but not with 404 responses. So apparently you're only allowed to read successful responses from this server.

You should get some additional warnings or errors in the console that tells you something like:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dog.ceo/api/breeds/listio. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

or

[Error] Origin null is not allowed by Access-Control-Allow-Origin.

[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. (listio, line 0)

[Error] Fetch API cannot load https://dog.ceo/api/breeds/listio. Origin null is not allowed by Access-Control-Allow-Origin.

You can fix this, at least when just testing, by using no-cors mode instead. With bs-fetch you'd do:

Fetch.fetchWithInit(url, Fetch.RequestInit.make(~mode=Fetch.NoCORS, ()))

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 19, 2018 at 14:40

glennsl

29.2k12 gold badges60 silver badges80 bronze badges

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

1 Comment

roryhewitt Over a year ago

Pay attention to glennsl's at least when just testing bit! Otherwise this will come back to bite you when you move to Production. Just an FYI :)

Collectives™ on Stack Overflow

Fetch rejects promise on 404 responses instead of resolving with 404 status

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related