通过 Angular 启用 CORS

Question

我正在使用 Angular 7，我应该构建一个前端，后端部署在 Heroku 上。 由于我无法编辑后端（显然没有启用 CORS），我无法访问任何 api，并且出现错误：

Access to XMLHttpRequest at ' http://ebit-front-test.herokuapp.com/register ' from origin ' http://localhost:4200 ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check : 它没有 HTTP ok 状态。 register.service.ts:31

后端返回代码 0，正文为：[object ProgressEvent]

有没有办法通过 Angular 启用 CORS，或者避免这个问题。 我曾尝试使用自定义代理配置，但效果不佳。

*这个问题与其他类似问题不同，因为他们实际上可以访问他们的后端，而我必须在没有访问后端的情况下解决问题。

Answer 1

您可能想在 Angular 中设置本地代理。 在angular.json添加选项proxyConfig指向您的定义文件：

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

并创建proxy.conf.json文件，例如：

{
  "/register": {
    "target": "http://ebit-front-test.herokuapp.com/register",
    "secure": false
  }
}

然后从客户端调用 url 作为http.post('/register') 。 调整您的代理配置，使其捕获所有 api 路由。

更多阅读...

Answer 2

CORS 需要在服务器上配置为“真正的”应用程序，您希望非开发人员使用该应用程序。

但是，出于测试目的，您可以使用代理服务器来添加服务器应添加的标头。

例如，参见https://elements.heroku.com/buttons/marcus2vinicius/cors-anywhere

Answer 3

对于遇到此问题的其他所有人，我找到了一种避免 CORS 错误的方法。 如果您在没有 web 安全性的情况下运行 Chrome，则 CORS 错误将消失。

这不会启用 CORS，所以它是一个临时解决方案，如果您无法访问您的后端，但需要开发前端。

在没有 web 安全性的情况下运行的步骤：

1）以管理员身份运行命令提示符，并使用此命令杀死所有 Chrome 实例：

taskkill /F /IM chrome.exe

2) 使用以下命令运行禁用 web 安全性的新 Chrome 实例：

启动 chrome https://teckangaroo.com/chrome-disable-web-security/ –disable-web-security –user-data-dir=”C:\teckangaroo.com”

应该这样做！