【问题标题】:Angular 9 CORS issueAngular 9 CORS 问题
【发布时间】:2020-06-21 10:02:06
【问题描述】:

我正在将我的 Angular 应用程序从 8 迁移到 9,现在我遇到了一个 CORS 问题,这是我在迁移之前没有遇到的问题。为什么 Angular 8 没有这个问题?

  • web 在 localhost:4200 上使用 ng serve 运行
  • 后端在本地主机上运行(默认端口 80)

所以我在我的应用程序中添加了一个proxy.conf.json 文件:

{
    "/api/*": {
        "target": "http://localhost:80",
        "secure": false,
        "logLevel": "debug"
    }
}

我的angular.json 看起来像:

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build",
            "proxyConfig": "src/proxy.conf.json"
          },

然而,我在调用后端时仍然收到 CORS 错误。还有什么我应该做的吗?

我也尝试使用以下命令 ng serve --proxy-config src/proxy.conf.json 运行应用程序,但没有运气,同样的错误。

[编辑]

<add name="Access-Control-Allow-Origin" value="http://localhost:4200" /> 添加到我的后端配置后,我得到了这个:

Access to XMLHttpRequest at 'http://localhost/mybackend/token' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:4200, http://localhost:4200', but only one is allowed.

但我只添加了一次。我也没有通过代码添加。

[编辑 2]

我的配置:

{
    "/api/*": {
        "target": "http://localhost:80/mybackend/",
        "pathRewrite": { "^/api": "" },
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug"
      }
}

我还按照@adrisons 的建议从后端删除了Access-Control-Allow-Origin。我仍然得到同样的错误:

Access to XMLHttpRequest at 'http://localhost/mybackend/token' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

【问题讨论】:

  • 错误实际上是阻止接收响应,还是只是显示在控制台中?我记得升级后遇到了类似的问题,但该应用程序实际上运行良好。这与 chrome 的更新有关,该更新现在记录了在我升级之前发生的警告,我只是在查看控制台之前没有注意到它们。
  • 您是否在后端设置“Access-Control-Allow-Origin”?不同的端口意味着它的来源不同。我知道 localhost 是此规则的排除项,但您的浏览器的最新版本可以更改它并现在开始将其视为不同的来源。
  • @BizzyBob,响应被屏蔽了,所以不仅仅是警告。
  • @AlexanderTrakhimenok,我理解,但如果我使用与 Angular 8 相同的浏览器,它会神奇地工作......所以我很想认为这是 Angular 中发生的变化。
  • 你的后端是什么? .NET?

标签: angular cors


【解决方案1】:

我遇到了同样的问题。

您需要将changeOrigin 添加到代理。也许pathRewrite,如果你想从目标网址中删除/api/

  "/api/*": {
    "target": "http://localhost:80",
    "pathRewrite": { "^/api": "" },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }

【讨论】:

  • 谢谢。我的后端位于localhost:80/mybackend。我应该将这些参数设置为什么值?
  • 你可以试试"pathRewrite": { "^/api": "/mybackend"}
  • 复制该配置并将目标值替换为localhost:80/mybackend
  • 使用这个配置你不需要设置 Access-Control-Allow-Origin 标头:)
  • @adrisons 这听起来应该可以工作......但它没有(请参阅我的帖子编辑)。