Question

我想将PWA功能添加到我的App Service中。它是用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.

似乎我在App Service中启用的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 App Service设置了一个名为与客户端进行身份验证的会话的“ AppServiceAuthSession” 浏览器。 Web应用程序可能使用XMLHttpRequest / AJAX请求来应用程序的各种功能以及将请求发送到Azure App Service还将包含AppServiceAuthSession cookie。什么时候该cookie不存在于请求中，Azure App Service将将请求重定向到Azure AD进行登录。此重定向导致自目标域以来，AJAX请求成为CORS请求更改，并且默认情况下Azure AD不允许跨源请求。

在我的情况下，浏览器正在发送不包含必需标头的清单的请求。

Answer 1

我只是在这里介绍，但是您可以尝试在清单链接中使用crossOrigin属性，如下所示：

 <link rel="manifest" href="/webmanifest.json" crossOrigin="use-credentials">

以下一些相关链接可能会有所帮助。根据第一页，在请求manifest.json时，默认情况下不会传递用户凭据：

请帮助我。

Azure应用服务-访问PWA webmanifest.json

1 个答案: