关于vercel cors问题中生产模式的角度项目[已解决]答案

【问题标题】：angular project on production mode in vercel cors problem [solved]关于vercel cors问题中生产模式的角度项目[已解决]
【发布时间】：2021-10-04 15:18:48
【问题描述】：

我开发了一个 Angular 项目，这个项目的 Angular 版本是 11.0.2。在本地开发项目时，我定义了一个 proxy.config.json 并且它运行时没有任何 cors 问题。

当我决定发布项目时，部署到 vercel 但 http 客户端请求返回 cors 错误。我的 vercel.json 配置文件是

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" }
      ]
    }
  ]
}

我了解到 proxy.conf.json 文件在生产模式下不起作用。我将所有服务请求 api 端点 url 更新为真实字符串 url。

我在 postman 上测试了所有的 api 端点，后端工作正常

【问题讨论】：

标签： angular cors vercel

【解决方案1】：

我用这个 vercel.json 配置文件解决了这个问题

{
  "rewrites": [
    { "source": "/api/:match*", "destination": "https://api.endpoint.url/:match*" }

  ],
  "headers": [
    {
      "source": "api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" }
      ]
    }
  ]
}

我所有的 http 客户端请求都是这样的

this.http.post<Response>(`api/${service}`);

【讨论】：