Safari：“阻止 https://... 请求凭据，因为它是跨域请求。”更新到 Angular 8 后答案

【问题标题】：Safari: "Blocked https://... from asking for credentials because it is a cross-origin request." after updating to Angular 8Safari：“阻止 https://... 请求凭据，因为它是跨域请求。”更新到 Angular 8 后
【发布时间】：2019-10-26 15:58:46
【问题描述】：

我们已使用 Basic Auth 保护我们的 Angular Web 应用程序。在更新我们的应用从 Angular 7 到 8.0 之后，Safari 中不再要求我们提供凭据，并且控制台中出现以下错误：

[Error] Blocked https://*/runtime-es2015.4f263ec725bc7710f1f5.js from asking for credentials because it is a cross-origin request.
[Error] Blocked https://*/main-es2015.6fa442dd5c5a204f47da.js from asking for credentials because it is a cross-origin request.
[Error] Blocked https://*/polyfills-es2015.fd951ae1d7572efa3bc6.js from asking for credentials because it is a cross-origin request.

在 Firefox 和 Chrome 中，该应用程序仍然可以正常运行。 Safari 版本是 12.1.1。

有人知道 Safari 的问题是什么吗？

【问题讨论】：

刚刚测试并删除 basic-auth 确实“修复”了它，谢谢
有人真正了解这个问题的根源吗？

标签： angular safari basic-authentication

【解决方案1】：

由于 angular/cli 8.1 (PR) 有一个选项 crossOrigin 用于 ng build 命令 (documentation)。可能的值为：无 |匿名 |使用凭据（默认为无）。

使用此选项将更改 index.html 中的脚本标签以添加跨域属性。

您可以使用这个临时的构建使用： ng build --crossOrigin=anonymous

或者在你的architect.build.options下使用你的angular.json中的选项：

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "crossOrigin": "anonymous", // <-- set value here
        // other options

【讨论】：

这应该被标记为答案。我还想知道为什么这是 Safari 的问题，而不是其他浏览器。
我尝试了两种方法，但我一直收到错误消息。在命令行控制台中显示未知选项 --crossOrigin 并在 angular.json 中显示模式验证失败并出现以下错误：数据路径“”不应该有其他属性（crossOrigin）知道为什么它不工作吗？
在某些情况下你甚至应该使用"crossOrigin": "use-credentials"（我使用的是 Google OAuth2 身份验证）。

【解决方案2】：

似乎模块脚本规范 (https://github.com/whatwg/html/pull/3656) 的一些更改尚未在 Safari 中实现。对我来说，它适用于 Safari Technology Preview。

与此同时，您可以通过在模块脚本中添加crossorigin 属性来修复它，如下所示：

<script src="runtime-es2015.ff56c41ec157e6d9b0c8.js" type="module" crossorigin></script>

这是我采用的解决方案（需要一个第三方包）。

首先，安装这个自定义 webpack 构建器：@angular-builders/custom-webpack:

npm i -D @angular-builders/custom-webpack

请务必检查其自述文件中的先决条件并根据需要更新其他依赖项。

更新您的angular.json 以使用构建器并设置indexTransform 选项：

"projects": {
  ...
  "your-app": {
    ...
    "architect": {
      ...
      "build": {
        "builder": "@angular-builders/custom-webpack:browser"
        "options": {
            "indexTransform": "./index-html-transform.js"
              ...
        }

最后，在你的项目根目录下创建一个名为index-html-transform.js的文件，内容如下：

module.exports = (targetOptions, indexHtml) => {
  const regex = /(<script.*?type="module".*?)>/gim;
  return indexHtml.replace(regex, "$1 crossorigin>");
};

现在，当您构建应用并发出 index.html 时，它会自动将 crossorigin 属性添加到每个模块脚本。

【讨论】：

如何才能做到这一点？ Angular 自己添加该标签（没有 crossorigin 属性）
@MikeFurlender 我已经用我目前使用的解决方案更新了我的答案（我最初回答时没有找到）

【解决方案3】：

我的解决方案是在构建时添加--subresource-integrity标志：

ng build --subresource-integrity

此标志还根据this comment向模块脚本添加crossorigin属性。

【讨论】：

【解决方案4】：

我在使用 Angular 8 时遇到了同样的问题。为了解决这个问题，我刚刚编辑了我的 tsconfig.json，就像使用 Angular 7 一样：

{
  ...
  "compilerOptions": {
    ...
    "module": "es2015",
    ...
    "target": "es5",
    ...
  }
}

【讨论】：