Angular 狩猎旅行；此 路 不通https://... 因为这是一个跨来源请求，所以不要求提供凭据。”；更新到8后

我们已经用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的问题是什么吗？

似乎模块脚本spec（）的某些更改尚未在Safari中实现。对我来说，它适用于Safari技术预览版

同时，您可以通过在模块脚本上添加

crossorigin

属性来修复它，如下所示：

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

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

更新

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>");
};

module.exports=（targetOptions，indexHtml）=>{
const regex=/（/gim；
返回indexHtml.replace（regex，“$1 crossorigin>”）；
};

---

现在，当您构建应用程序并发出

index.html

时，它会自动将

crossorigin

属性添加到每个模块脚本中。

我对Angular 8也有同样的问题。为了解决这个问题，我刚刚编辑了我的

tsconfig.json

，与Angular 7一样：

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

---

我的解决方案是在构建时添加

--子资源完整性

标志：

ng build --subresource-integrity

此标志还根据向模块脚本添加

crossorigin

属性。

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

使用此选项将更改index.html中的脚本标记以添加crossorigin属性

您可以使用以下命令将此临时命令用于生成：

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

“架构师”：{
“构建”：{
“生成器”：“@angular devkit/build angular:browser”，
“选择”：{
“crossOrigin”：“anonymous”，//刚刚测试并删除了basic auth并“修复”了它，谢谢。有人真的找到了这个问题的根源吗？有人怎么做？Angular自己添加了这个标记（没有crossOrigin属性）@MikeFurlender我已经用我当前使用的解决方案更新了我的答案（我最初回答时没有找到答案）这应该被标记为答案。我想进一步了解的是，为什么Safari会出现问题，而其他浏览器却没有。我尝试了两种方法，但不断出现错误。在命令行控制台中，它显示未知选项--crossOrigin，在angular.json中，它显示模式验证失败，出现以下错误：数据路径“”不应该有其他属性（crossOrigin）知道它为什么不工作吗？您甚至应该在某些情况下使用
“crossOrigin”：“使用凭据”
（我使用Google OAuth2身份验证）。
"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "crossOrigin": "anonymous", // <-- set value here
        // other options