How to resolve Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' ... in ASP.NET 5 - asp.net-core

Question

I am trying to add Google authentication to my website which is been developed using ASP.NET 5 with web API controller along with react and axios. The request call from axios is throwing Network error. As shown below
Error: Network Error
at createError (https://localhost:44331/static/js/bundle.js:48536:15)
at XMLHttpRequest.handleError (https://localhost:44331/static/js/bundle.js:47921:14)
message: "Network Error"
isAxiosError: true
When I check the browser console it throws error stating --> Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=610964943445-9jinqs228qqa64kt9fqdsmo1mtkbg9ni.apps.googleusercontent.com&redirect_uri=https%3A%2F%2Flocalhost%3A44331%2Fsignin-google&scope=openid%20profile%20email&state=CfDJ8If3moGK8nFOrHvENOPET4upw6kmRMdILweas1dhbMn4xPQuR1iRNG_YyZmLF5U-1BGJAYpW2XDf_38k7Glu2UGC2MGe4lEP3G1kUm4FhQ39A4Cw3Mq9G3W4E9t7xJltqSWiDuNdu-MyJr39ykiFRYMziYWVcIhf9J-Ju6R4LlqQKpw5WL2BV2s84_vl8l1z1TCH2QX0Ifz6XPlEdpqK3G6MqI8OFsjMd96RimTzZIL00Q3Bkeb6JOpMl5TWoP3lRYPsR0sf2vEVnX1xYxoGFU0'
(redirected from 'https://localhost:44331/signin/ExternalLogin?provider=Google') from origin 'https://localhost:44331' has been 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.
Below are my code details-->
Startup.cs-->
public void ConfigureServices(IServiceCollection services)
{
services.AddAuthentication().AddGoogle(googleOptions =>
{
googleOptions.ClientId = configuration.Google.ClientId;
googleOptions.ClientSecret = configuration.Google.ClientSecret;
});
services.AddCors(options => options.AddPolicy("MyPolicy",
builder =>
{
builder
.WithOrigins("https://localhost:44331")
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials();
}));
services.AddAuthentication(IISDefaults.AuthenticationScheme);
services.AddControllers();
services.AddMvc();
// In production, the React files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/build";
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
..
app.UseRouting();
app.UseAuthentication();
app.UseCors("MyPolicy");
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
}
SignInController.cs-->
[ApiController]
[Route("[controller]/[action]")]
public class SignInController : ControllerBase
{
...
[EnableCors("MyPolicy")]
[AllowAnonymous]
[HttpPost]
public IActionResult ExternalLogin(string provider, string returnUrl=null)
{
var redirectUrl = Url.Action("ExternalLoginCallback", "SignIn",
new { ReturnUrl = returnUrl });
var properties = _signInManager
.ConfigureExternalAuthenticationProperties(provider, redirectUrl);
return new ChallengeResult(provider, properties);
}
}
reactapicall.jsx-->
import axios from "axios";
const baseUrl = "/signin/"
export default {
login(url = baseUrl) {
return {
gmail: providerName => axios.post(url + "ExternalLogin?provider=" + providerName, null, { headers: { 'content-type': 'application/json', 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': '*'} })
}
}
}
launchSettings.json-->
"iisSettings": {
"windowsAuthentication": true,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "https://localhost:44331",
"sslPort": 44331
}
package.json-->
{
"name": "best_ui_react_app",
"version": "0.1.0",
"private": true,
"proxy": "https://localhost:44331",
"dependencies": {
"#emotion/react": "^11.4.1"
}
..
}
I have tried all the approaches but none of them worked. Please give me some suggestions so that I can fix this issue.