angular project on production mode in vercel cors problem

Issue

i develop a angular project, this project angular version is 11.0.2. When develop project on my local, i define a proxy.config.json and it is run without any cors problem.

When i decide publish project, deploy to vercel but http client requests return cors error. My vercel.json config file is

{
  "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" }
      ]
    }
  ]
}

I learn proxy.conf.json file not work on production mode and. i updated all service requests api endpoint url to real string url.

I test all api endpoints on postman, backend is work

Solution

I solved problem this with this vercel.json config file

{
  "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" }
      ]
    }
  ]
}

my all http client requests like this

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

Answered By - gizemsever