Reactjs 从Axios调用.Net WebAPI时出现CORS错误
我使用Reactjs 从Axios调用.Net WebAPI时出现CORS错误,reactjs,api,.net-core,cors,Reactjs,Api,.net Core,Cors,我使用Axiosreact调用.Net API时使用了一个登录表单 axios .post( 'https://localhost:5001/login', { email: 'abc@gmail.com', password: '12345', }, { headers: { 'Content-Type': 'application/json', 'Access-Co
Axios
react调用.Net API时使用了一个登录表单
axios
.post(
'https://localhost:5001/login',
{
email: 'abc@gmail.com',
password: '12345',
},
{
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
},
)
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
})
下面是Startup.cs在API端处理CORS的代码
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
services.AddSwaggerGen(c =>
{
c.SwaggerDoc("v1", new OpenApiInfo { Title = "API", Version = "v1" });
});
services.AddCors(option =>
{
option.AddPolicy("CorsPolicy", policy =>
{
policy.AllowAnyMethod().AllowAnyHeader().WithOrigins("http://localhost:3000/");
});
});
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseSwagger();
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "API v1"));
}
// app.UseHttpsRedirection();
app.UseRouting();
app.UseCors("CorsPolicy");
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
在浏览器控制台中,我收到以下错误:
Access to XMLHttpRequest at 'https://localhost:5001/login' from origin 'http://localhost:3000' 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.
Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:84)
POST https://localhost:5001/login net::ERR_FAILED
我已经使用VS代码的
REST客户机扩展测试了API。API工作正常,但从浏览器调用时会出现这些错误。尝试将AddCors移动到配置部分的顶部,然后再添加控制器。还要更改语法并从url中删除尾随“/”:
services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
{
builder.WithOrigins("http://localhost:3000")
.AllowAnyMethod()
.AllowAnyHeader();
}));
你好@Sergey,删除我现有代码中的尾随“/”行得通。但是为什么“/”会导致这个问题呢?如果URL以/结尾,那么ulrs的比较总是返回false。