Chrome 90 在 CORS 预检中向 Angular localhost 应用添加 https

Posted 2023-03-04

【中文标题】Chrome 90 在 CORS 预检中向 Angular localhost 应用添加 https

【英文标题】：Chrome 90 adds https to Angular localhost app on CORS preflight

【发布时间】：2021-07-19 20:18:49

【问题描述】：

我在 Google Chrome 90 中检测到异常行为。

我有一个 Angular 应用程序（开发端口 4200）以纯 http 形式提供服务，因为它只是一个本地环境。后端是一个 .NET Core 5 应用，在 Kestrel 的 5001 端口上运行 https。

今天我所有的OPTIONS 预检请求开始失败。

我发现 Chrome 使用 https://localhost:4200 而不是 http 发出预检请求，但由于 .NET 后端不允许 https 中的本地主机而失败。

当我找到 Preflight 请求时，我复制了它的 Powershell 等效项

Invoke-WebRequest -Uri "https://localhost:5001/api/v1/secure/xxxx" `
-Method "OPTIONS" `
-Headers @
"Accept"="*/*"
  "Access-Control-Request-Method"="GET"
  "Access-Control-Request-Headers"="authorization"
  "Origin"="https://localhost:4200"
  "User-Agent"="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/90.0.4430.85 Safari/537.36"
  "Sec-Fetch-Mode"="cors"
  "Sec-Fetch-Site"="same-site"
  "Sec-Fetch-Dest"="empty"
  "Referer"="https://localhost:4200/"
  "Accept-Encoding"="gzip, deflate, br"

回复为空白204 No Content。如果我修改此脚本以使用 https:// 作为来源，则响应包含所需的 CORS 标头。

应用程序在 http 中提供。我的浏览器栏上出现了Insecure 警告，但没关系。

除了解决这个问题，我该如何解决这个问题？会不会是 Chromium 中的错误？

【参考方案1】：

小菜一碟

在后端添加https://localhost:4200作为CORS origin，但这可能意味着根据YMMV重新编译/重新加载/重新部署

【参考方案2】：

此答案适用于任何拥有 Cordova 应用程序的人。

我已经修改了使用cordova advanced-http 插件的请求：

https://github.com/silkimen/cordova-plugin-advanced-http

这提供了更多的控制并避免了对 CORS 的担忧。