我想将PWA功能添加到我的应用程序服务中。是用C#写的ASP.NET. 但是,Chrome无法访问清单,Edge甚至无法获取favicon(这可能是另一个问题)。其他桌面浏览器显然还没有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身份验证似乎干扰了浏览器的清单请求。
我已经把必要的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
在上面的教程链接中,有一个相关的文本块可以更好地解释我的问题,而不是我的问题本身:
“AppServiceAuthSession”,用于与客户端的已验证会话
应用程序的各种功能和发送到Azure的请求
应用程序服务还将包含AppServiceAuthSession cookie。什么时候?
将请求重定向到Azure AD以进行登录。此重定向导致
默认情况下,更改和Azure AD不允许跨源请求。
在我的例子中,浏览器发送的清单请求不包含必要的头。
