CORS blocked origin - Origin and allowed origin are the same

Question

Using dockerized Ory Kratos and Angular (www folder hosted via nginx to be able to modify headers) on localhost and trying to execute

const headers = {
   Accept: 'application/json',
};
fetch('http://127.0.0.1:4433/self-service/registration/browser', {
  method: 'GET', 
  headers,
  redirect: 'follow',
  credentials: 'include',
})
.then((r) => console.log(r))
.catch((f) => console.log(f));

leads to

Access to fetch at 'http://127.0.0.1:8100/auth/register?flow=b35c3f9a-5592-4121-80b9-87503c38e1d3' (redirected from 'http://127.0.0.1:4433/self-service/registration/browser') from origin 'http://127.0.0.1:8100' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://127.0.0.1:8100' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

http://127.0.0.1:4433/self-service/registration/browser redirects to http://127.0.0.1:8100/custompath/register?flow=[some-flow-id] via a 302 HTTP response. The browser tries to resolve the redirect and throws the error mentioned above.

Origin and allowed origin are the same - so how can that error happen? I already found this answer on stackoverflow: https://stackoverflow.com/a/62320912/14345380 if that's helpful.

Chrome version 87.0.4280.88

Edit #1 Network tab output can be seen here

Edit #2 To be able to resolve the issue yourself I set up a little repository: Find it here

Edit #3 Thanks for the hint from pandamakes . The test repo is not running on:8100 but on 4200 (Switched from ionic project to angular project).

Edit #4 I started another discussion at the ory/kratos project origin here . The Ory Team implemented a SDK which we can use instead of plain fetch requests.

Answer 1

One thing is simply add no-cors to the request.

mode: 'no-cors'

Also, you say you have Access-Control-Allow-Origin header set did you also set Access-Control-Allow-Credentials: true , since you are fetching with credentials: "include" .

Lastly setting credentials: "include" origin can not be a localhost or 127.0.0.1 or it will return false and cause a cors error, so either, set credentials to same-site or omit or get yourself a domain name.

Answer 2

I... think I got it...

The 302 redirection works, but when the fetch requests follows the redirection, it now attempts at fetching a non-cors resource. In this event, it will not attach an Origin request header (since it is a non CORS request).

When the response arrives, the browser will compare access-control-allow-origin header, if any exist, to the origin of the request. If the response header exists, and is not *, it must match the origin header of the request.

So solve your issue, you will want to remove the access-control-allow-origin in your nginx setup, or set it to *

min repro: https://github.com/xgui3783/cors-min-repro