【发布时间】：2019-02-08 07:53:24
【问题描述】：
我想将 PWA 功能添加到我的应用服务中。它是用 C# ASP.NET 编写的。但是，Chrome 无法访问清单，Edge 甚至没有获得图标（这可能是一个单独的问题）。其他桌面浏览器显然还没有 PWA 功能。
Chrome 是唯一请求清单的浏览器。这是我控制台中的错误消息：
Failed to load https://login.windows.net/b79fd714-9c54-449d-b377-3b59deb2d3b6/oauth2/authorize?response_type=code+id_token&redirect_uri=https%3A%%{myappname}.azurewebsites.net%.auth%2Flogin%2Faad%2Fcallback&client_id=67bedd5c-5478-44ec-ba13-85061c71114b&scope=openid+profile+email&response_mode=form_post&nonce=df52b6dc64dd4c3393957675f365ae93_20180903064438&state=redir%3D%252Fwebmanifest.json: Redirect from 'https://login.windows.net/b79fd714-9c54-449d-b377-3b59deb2d3b6/oauth2/authorize?response_type=code+id_token&redirect_uri=https%3A%%{myappname}.azurewebsites.net%.auth%2Flogin%2Faad%2Fcallback&client_id=67bedd5c-5478-44ec-ba13-85061c71114b&scope=openid+profile+email&response_mode=form_post&nonce=df52b6dc64dd4c3393957675f365ae93_20180903064438&state=redir%3D%252Fwebmanifest.json' to 'https://login.microsoftonline.com/b79fd714-9c54-449d-b377-3b59deb2d3b6/oauth2/authorize?response_type=code+id_token&redirect_uri=https%3A%%{myappname}.azurewebsites.net%.auth%2Flogin%2Faad%2Fcallback&client_id=67bedd5c-5478-44ec-ba13-85061c71114b&scope=openid+profile+email&response_mode=form_post&nonce=df52b6dc64dd4c3393957675f365ae93_20180903064438&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.
我在应用服务中启用的 AAD 身份验证似乎干扰了浏览器的清单请求。
我了解，要快速解决此问题，Microsoft 必须将此应用程序添加到他们的 CORS。这当然不是我期望发生的事情。但是，我需要一些替代方法来让浏览器访问清单。
我已将必要的 mimeMaps 添加到我的web.config。
<staticContent>
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<remove fileExtension=".webmanifest" />
<mimeMap fileExtension=".webmanifest" mimeType="application/json" />
</staticContent>
这是我的Head 的顶部：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf />
<meta name="viewport" content="width=device-width, initial-scale=>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/webmanifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="apple-mobile-web-app-title" content="{myappname}">
<meta name="application-name" content="{myappname}">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>@ViewBag.Title - {myappname}</title>
如果我使用某种 AJAX 请求，我会关注网络上的 tutorials 之一。但是，据我所知，我几乎无法控制标题。
注意：所有出现的我的应用名称都已替换为 {myappname}。我真的希望这些令牌是临时的......
在上面的教程链接中，有一段相关的文字比我的问题本身更能解释我的问题：
在用户向 Azure AD 进行身份验证以登录后的典型场景 在应用程序中，Azure 应用服务设置一个名为 “AppServiceAuthSession” 用于与客户端的经过身份验证的会话 浏览器。 Web 应用程序可以使用 XMLHttpRequest / AJAX 请求 应用程序的各种功能和发送到 Azure 的请求 应用服务还将包含 AppServiceAuthSession cookie。什么时候 请求中不存在此 cookie，Azure 应用服务将 将请求重定向到 Azure AD 以进行登录。这种重定向导致 AJAX 请求成为 CORS 请求，因为目标域 默认情况下，Azure AD 不允许跨源请求。
在我的情况下，浏览器发送的清单请求不包含必要的标头。
【问题讨论】：
标签： html azure cors progressive-web-apps azure-web-app-service