While building an internal (Blazor) application, I stumbled over some CORS issues. As this was an internal application, I decided to be lazy and just disable CORS on my request:
In the example above I’m using the SetBrowserRequestMode() to disable the CORS preflight check.
Afther doing that the CORS issue was gone, unfortunately my application still didn’t work because now I got a 401 response back?!
I was quite confident that the provided username/password combination was correct. So what is going on?
I monitored my request using the browser developer tools and I noticed that the authorization header was missing:
What was going on?
The MDN documentation brought me the answer when I had a look at the request mode documentation specifically for ‘no-cors’:
no-cors
— Prevents the method from being anything other thanHEAD
,GET
orPOST
, and the headers from being anything other than simple headers. If any ServiceWorkers intercept these requests, they may not add or override any headers except for those that are simple headers. In addition, JavaScript may not access any properties of the resultingResponse
. This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains.
So this explains why the authorization header is removed before sending the request.
Another reason why being lazy as a developer is not always a good idea. So I went back to my application and enabled CORS on the API I was calling…