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

说明

我的前端框架为Vue3

前后端跨域选其一即可

前端跨域

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

javascript 复制代码
  server: {
    proxy: {
      '/api': {
        target: 'https://localhost:xxxx',
        changeOrigin: true,
        secure: false
      },
    },
  }

axios代码片段:

javascript 复制代码
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() 之前添加代码(注意事项已写在注释中):

cs 复制代码
// 跨域注册(于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() 之前添加代码:

cs 复制代码
app.UseCors("CorsPolicy");

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

javascript 复制代码
// .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
}
相关推荐
冲上云霄的Jayden3 天前
Paddlex服务化代理处理跨域、替换Response中Json key
json·fastapi·代理·跨域·uvicorn·paddlex·服务化
pitt19973 天前
Chrome 开发环境快速屏蔽 CORS 跨域限制!
chrome·跨域·cors·解决跨越技巧
李少兄7 天前
跨域问题的解决方案
java·前端·跨域
shenmu8418 天前
CORS + Django 跨域配置
django·cors
xuhe219 天前
部署sing-box代理服务器绕过付费校园网上网
linux·proxy·sing-box
坐吃山猪25 天前
跨域-告别CORS烦恼
前端·后端·跨域·cors
wv1124061 个月前
请求Geoserver的WTMS服务返回200不返回图片问题-跨域导致
geoserver·跨域·wtms
Mekeater2 个月前
手写一个Java Android Binder服务及源码分析
android·java·binder·proxy·stub·mremote·bbinder
小Mie不吃饭2 个月前
2025新时代 | 分析并解决企业跨域问题
前端·后端·springboot·api·web·跨域
漂流瓶jz2 个月前
谈一谈前端构建工具的本地代理配置(Webpack与Vite)
前端·webpack·node.js·vite·proxy·代理