angular vercel cors 问题中生产模式的项目[已解决]

Question

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

当我决定发布项目时，部署到 Vercel 但 http 客户端请求 return 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 个端点，后端正常工作

Answer 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}`);

angular vercel cors 问题中生产模式的项目[已解决]

angular project on production mode in vercel cors problem [solved]

cors

angular

vercel