前后端链条产生的跨域问题

进阶的CC2024-03-13 6:07

环境：

vite+vue3

.net 6 vsstudio2022C# asp .net core webapi

看别的up说这个第一条报错是因为：后端没有允许跨域导致的

解决办法:

1.在后端添加允许跨域

Program.cs

cs 复制代码

 //添加跨域策略
 builder.Services.AddCors(options =>
 {
     options.AddPolicy("CorsPolicy", opt => opt.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().WithExposedHeaders("X-Pagination"));
 });

cs 复制代码

 //使用跨域策略
 app.UseCors("CorsPolicy");

2.在前端配置代理

vite.config.ts

javascript 复制代码

  // 代理配置
  server:{
    proxy:{
       '/api':{
           target:"http://localhost:7137/api", //跨域地址
           changeOrigin:true, //支持跨域
           ws:true,
           rewrite:(path) => path.replace(/^\/api/, "")//重写路径,替换/api
       }
    }
 }

举例：调用后端接口 http://localhost:7137/api/User/GetUser

ok了，接口调用成功 ~

感谢up的高质量笔记

VS2022 .net6 WebApi 跨域处理，vscode vue 页面跨域处理_.net6 跨域-CSDN博客