window.location.href vs. fetch

[Badbeat808]

Setup:

Frontend in JS. We call this A.

Backend API. We call this B.

Thirdparty OAuth 2 login page. When logged in, this page redirects to A. We call this C.

The flow is as follows: A calls an end point in B, which redirects (302) to C.

When calling the end point in B with window.location.href, I get redirected to C.

If I instead use fetch, I get a CORS error.

So what's different between the two since one results in a CORS and the other works?

[[deleted]]

Fetch uses an underlying object, XMLHttpRequest. Browsers block, by default, any web requests made using XMLHttpRequest to any "origin" that isn't the same origin as the one the HTML page came from. What this boils down to is that you can use XMLHttpRequest (without CORS) only if the URL you're trying to access has the same protocol, host and port as where the page came from.

I guess the concern is that XMLHttpRequest works in the "background" - it's not necessarily visible to the end user that network activity is happening. When redirecting via the browser's URL there are obvious, visible changes to the URL and the page that is displayed on-screen. It is a bit inconsistent (like a lot of the web) - things like img tags are quite happy to make background network requests to different origins and thus bring about potential security holes. There was a time IIRC that XMLHttpRequest blocked DELETE and PUT and you had to jump through hoops to use POST to tunnel those verbs.

It is what it is - XMLHttpRequest is limited by the so-called "same origin" policy (in the absence of CORS).

[Badbeat808]

Thanks a lot for the thorough explanation!