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

Mudrock__

已于 2024-02-01 17:21:54 修改

阅读量1.8k

点赞数 11

分类专栏：前后端分离 ASP.NET Core WebAPI 文章标签：跨域 proxy cors

于 2024-02-01 17:21:15 首次发布

本文链接：https://blog.csdn.net/mudrock__/article/details/135977760

版权

ASP.NET Core WebAPI 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前后端分离

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在使用Vue前端框架的项目中处理前后端跨域问题，包括通过vite.config.js配置代理和在.NET后端启用CORS策略。分别提供了相应的代码示例和注意事项。

摘要由CSDN通过智能技术生成

说明

我的前端框架为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
}