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

环境:

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博客

相关推荐
Aerelin6 分钟前
爬虫playwright中的资源监听
前端·爬虫·js·playwright
WordPress学习笔记13 分钟前
专业建外贸网站公司推荐
大数据·前端·人工智能
XiaoCCCcCCccCcccC16 分钟前
多路复用 select -- select 的介绍,select 的优缺点,select 版本的 TCP 回显服务器
服务器·c++
XiaoCCCcCCccCcccC17 分钟前
多路复用 poll -- poll 的介绍,poll 的优缺点,poll 版本的 TCP 回显服务器
服务器·网络·c++
fruge33 分钟前
前端简历优化:如何突出项目亮点与技术深度(附示例)
前端
华仔啊36 分钟前
Vue3 + Element Plus 动态菜单实现:一套代码完美适配多角色权限系统
前端·vue.js
苦荞米39 分钟前
异步方法-C#中坑最大最深的功能
开发语言·c#
n***840741 分钟前
Springboot-配置文件中敏感信息的加密:三种加密保护方法比较
android·前端·后端
姜太公钓鲸2331 小时前
Bootstrap是什么?作用是什么?使用场景是什么?如何使用?
前端·bootstrap·html
Aerelin1 小时前
爬虫playwright中的等待机制
前端·爬虫·python