解决ASP.NET Core Web Api跨域问题，CORS，No ‘Access-Control-Allow-Origin‘

吾乃猪儿虫

2734人浏览 · 2023-09-24 23:55:05

吾乃猪儿虫 · 2023-09-24 23:55:05 发布

跨域

在使用ASP.NET Core Web Api创建后端接口，前端使用这个接口的时候出现了这个错误，这是一个跨域的问题，我们查看网络请求看到也是一个CORS问题，这是因为浏览器基于安全考虑，默认是不能向其他域名发送网络请求，默认只能在接口所在域名发送网络请求。

我们这里需要配置一下跨域，打开Program.cs文件修改一下代码，这里我前端的域名是http://localhost:5174，我们将他配置到其中使其服务器接受这个域名的访问，然后我们将app.UseCors()添加到代码中，具体代码如下：需要服务器接受多个域名访问在大括号里添加域名即可。

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

builder.Services.AddCors(i => i.AddDefaultPolicy(v =>
{
    v.WithOrigins(new string[] { "http://localhost:5174" }).AllowAnyMethod().AllowAnyHeader().AllowCredentials();
}));

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseCors();

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

AllowAnyOrigin()允许任意域名向我发送请求（虽然我们可以这样做，但是注意这种有安全隐患慎用！）

WithOrigins(new string[] { "http://localhost:5174" })表示那些域名可以向我发送请求

AllowAnyMethod()允许任意类型请求

AllowAnyHeader()允许任意报文头

AllowCredentials()接受任意认证方式

同时微软在开发这个的时候，怕我们犯一些错误，所以当我们全部都设置为Allow的时候，如下这样：

builder.Services.AddCors(i => i.AddDefaultPolicy(v =>
{
    v.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials();
}));

如果我们全部都设置为这样，在运行的时候会抛出异常，也就是说微软不允许你全部使用Allow开头的方法，必须要有一项需要拦截一些请求。

如下就是全部设置了Allow，会报这样的异常：

配置完跨域问题后，我们看一下前端现在能不能请求成功。

这是前端的请求代码，向后端发送一个post请求。

export function PostLogin(req){
	return request({
		method:'post',
				url:'/Login',
				headers: {'Content-Type': 'application/json'},
				data:req
	})
}

后端代码就是接受一个对象值，返回一个对象，定义的一个post请求。

[HttpPost]
public LoginReponse Login(LoginRequest req)
{
    Console.WriteLine(req.UserName);
    if (req.UserName == "admin" && req.Password == "123456")
    {
        var items = Process.GetProcesses().Select(x => new ProcessInfo(x.Id, x.ProcessName, x.WorkingSet64));
        return new LoginReponse(true, items.ToArray());
    }
    else
    {
        return new LoginReponse(true, null);
    }
}

我们运行代码，可以看到，我们前端发送的请求成功了，状态码也是为200。