title: Azure App Service - CORS OAUTH2 error when accessing PWA webmanifest.json
body: <p>I'd like to add PWA functionality to my App Service. It's written in C# ASP.NET. However, Chrome is unable to access the manifest and Edge don't even get the favicon (which might be a separate issue). Other desktop browsers apparently don't have PWA functionality yet.</p>
  
  <p>Chrome is the only browser that requests the manifest. Here's the error message in my console:</p>
  
  <pre><code>Failed to load https://login.windows.net/b79fd714-9c54-449d-b377-3b59deb2d3b6/oauth2/authorize?response_type=code+id_token&amp;redirect_uri=https%3A%%{myappname}.azurewebsites.net%.auth%2Flogin%2Faad%2Fcallback&amp;client_id=67bedd5c-5478-44ec-ba13-85061c71114b&amp;scope=openid+profile+email&amp;response_mode=form_post&amp;nonce=df52b6dc64dd4c3393957675f365ae93_20180903064438&amp;state=redir%3D%252Fwebmanifest.json: Redirect from 'https://login.windows.net/b79fd714-9c54-449d-b377-3b59deb2d3b6/oauth2/authorize?response_type=code+id_token&amp;redirect_uri=https%3A%%{myappname}.azurewebsites.net%.auth%2Flogin%2Faad%2Fcallback&amp;client_id=67bedd5c-5478-44ec-ba13-85061c71114b&amp;scope=openid+profile+email&amp;response_mode=form_post&amp;nonce=df52b6dc64dd4c3393957675f365ae93_20180903064438&amp;state=redir%3D%252Fwebmanifest.json' to 'https://login.microsoftonline.com/b79fd714-9c54-449d-b377-3b59deb2d3b6/oauth2/authorize?response_type=code+id_token&amp;redirect_uri=https%3A%%{myappname}.azurewebsites.net%.auth%2Flogin%2Faad%2Fcallback&amp;client_id=67bedd5c-5478-44ec-ba13-85061c71114b&amp;scope=openid+profile+email&amp;response_mode=form_post&amp;nonce=df52b6dc64dd4c3393957675f365ae93_20180903064438&amp;state=redir%3D%252Fwebmanifest.json' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://{myappname}.azurewebsites.net' is therefore not allowed access.
  </code></pre>
  
  <p><strong>It would appear that my AAD authentication, which I enabled in the App Service, is interfering with my browser's manifest request.</strong> </p>
  
  <p>I understand that to resolve this issue quickly, Microsoft would have to add this application to their CORS. This is certainly not something I would expect to happen. However, I need some alternative way to let the browser access the manifest.</p>
  
  <p>I have added the necessary mimeMaps to my <code>web.config</code>.</p>
  
  <pre><code>&lt;staticContent&gt;
    &lt;remove fileExtension=".json" /&gt;
    &lt;mimeMap fileExtension=".json" mimeType="application/json" /&gt;
    &lt;remove fileExtension=".webmanifest" /&gt;
    &lt;mimeMap fileExtension=".webmanifest" mimeType="application/json" /&gt;
  &lt;/staticContent&gt;
  </code></pre>
  
  <p>Here's the top part of my <code>Head</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=&gt;
  
      &lt;link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"&gt;
      &lt;link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"&gt;
      &lt;link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"&gt;
      &lt;link rel="manifest" href="/webmanifest.json"&gt;
      &lt;link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"&gt;
      &lt;meta name="apple-mobile-web-app-title" content="{myappname}"&gt;
      &lt;meta name="application-name" content="{myappname}"&gt;
      &lt;meta name="msapplication-TileColor" content="#da532c"&gt;
      &lt;meta name="theme-color" content="#ffffff"&gt;
  
  
      &lt;title&gt;@ViewBag.Title - {myappname}&lt;/title&gt;
  </code></pre>
  
  <p>If I was using some kind of AJAX request, I'd follow one of the <a href="https://blogs.msdn.microsoft.com/aaddevsup/2018/05/09/receiving-cors-redirection-error-when-signing-into-app-service-using-azure-ad/" rel="noreferrer">tutorials</a> on the web. However, I have little to no control over the header, as far as I know.</p>
  
  <p>Note: All occurrences of my app's name have been replaced with {myappname}. I really hope that those tokens are temporary...</p>
  
  <hr>
  
  <p>In the tutorial link above, there's a relevant block of text that explains my issue better than my question itself:</p>
  
  <blockquote>
    <p>In a typical scenario after a user authenticates to Azure AD to log
    into an application, Azure App Service sets a cookie called
    “AppServiceAuthSession” for that authenticated session with the client
    browser. The web application may use XMLHttpRequest / AJAX request for
    various functionality of the application and the request sent to Azure
    App Service would also contain the AppServiceAuthSession cookie. When
    this cookie is not present in the request, Azure App Service will
    redirect the request to Azure AD for login. This redirection causes
    the AJAX request to become a CORS request since the destination domain
    changes and Azure AD by default does not allow cross origin request.</p>
  </blockquote>
  
  <p>In my case the browser is sending a request for the manifest that does not contain the necessary header.</p>