ASP.NET Core WebAPI_解决跨域问题(前端后端)

说明

我的前端框架为Vue３

前后端跨域选其一即可

前端跨域

在项目的根目录找到vite.config.js文件，添加代码：

server: {proxy: {'/api': {target: 'https://localhost:xxxx',changeOrigin: true,secure: false},},}

axios代码片段：

const req = axios.create({baseURL: '/api'})const login = async () => {const resp = await req.post('/login/verify', loginData.value)respData.value = resp.data.message}

此时，请求实际上被代理为https://localhost:xxxx/api/login/verify，不会触发跨域问题

后端跨域

在项目的根目录找到Program.cs文件，

在 var app = builder.Build() 之前添加代码（注意事项已写在注释中）：

// 跨域注册(于var app = builder.Build()之前)builder.Services.AddCors(options =>{ // CorsPolicy为跨域策略名(可选参数)options.AddPolicy("CorsPolicy", builder =>{builder.WithOrigins("http://localhost:5173") // AllowAnyOrigin允许任何来源的跨域请求(.WithOrigins(url) 仅允许指定来源的跨域请求)// 注意: URL末端切勿加上"/".AllowAnyMethod() // 允许任何HTTP方法.AllowAnyHeader() // 允许任何Header.AllowCredentials();// 允许凭据(授权/身份验证)// 1/2/3为默认选项 4需要人为开启// 设置项不允许均为AllowAnyxxx()});});

在app.UseHttpsRedirection() 之前添加代码：

app.UseCors("CorsPolicy");

需要注意的是，此时axios中的代码片段需要稍作修改：

// .net开启CORS时, 需要完整路径const req = axios.create({baseURL: 'https://localhost:7043/api'})const login = async () => {const resp = await req.post('/login/verify', loginData.value)respData.value = resp.data.message}