CORS error when sending post request to local Ballerina server via web browser

[normal fulcrum]

I'm running a local Ballerina server and React frontend on localhost. I get following cors error while sending post requests to the server using axios. But this isn't happening when I try Postman or Choreo.

blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The cors config in server is as follows

@http:ServiceConfig {
cors: {
allowOrigins: [""],
allowCredentials: false,
allowHeaders: [""],
allowMethods: ["GET","POST","PUT","DELETE", "OPTIONS", "PATCH","HEAD"],
maxAge: 86400
}
}

In axios I send following headers

{
headers:{
"content-type": "application/json",
"Access-Control-Allow-Origin": "*"
}
}

I found a similar problem for old ballerina version: https://github.com/ballerina-platform/ballerina-lang/issues/14194.
But the solution doesn't work for my case. Is there any better solution for this without going for deployment. Or a temporary solution, only to use in development phase?

[lean depot]

@lone root

[lone root]

Does the Origin header is sent from the browser to the ballerina backend? Hosting the front end app should resolve the issue

[normal fulcrum]

Yes. The header is sent from the browser. This error only happens when I'm using the localhost. I'll host it somewhere and see. Thanks