Jeff Sanders Technical Blog

I am a Microsoft employee that has worked on all aspects of the Web Stack for a long time. I hope these blogs are useful to you! Use this information at your own risk.

<< Go Back

Azure App Service Authentication Cors Error Easy Auth

- 23 Apr 2020

Using Easy Auth you might see this error: Failed to load https://login.windows.net/….: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://sitename.azurewebsites.net‘ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Cause

This behavior can occur if they are using fetch within their application. When using EasyAuth, a “Cookie” header is passed with the “AppServiceAuthSession” token. If the header is missing, an “authorize” request will be sent from provider. Sample below.

Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

Accept-Encoding:
gzip, deflate, br

Accept-Language:
en-US,en;q=0.9

Cache-Control:
no-cache

Connection:
keep-alive

Cookie:
ARRAffinity=; AppServiceAuthSession=

Host:
sitename.azurewebsites.net

Solution

By default, fetch doesn’t automatically send cookies. To resolve the issue, the customer will need to add the “credentials” property with either “same-origin” or “include” provided.

Example-

sendData() {

fetch(‘/api/testapi’, {

method: ‘POST’,

body: JSON.stringify({

     data: this.state.text

}),

credentials: ‘same-origin’,

headers: { ‘Content-Type’: ‘application/json’ },

})

Additional information for fetch can be found at https://github.com/github/fetch#sending-cookies

Acknowledgement:  Thanks to my Colleague Toan Nguyen for this information!

<< Go Back