CORS跨域的解决方案

为什么会发生CORS跨域：

浏览器出于安全性,禁止跨ip/端口访问;

前端解决:

前端可以通过代理来实现跨域访问

大致过程是:前端 8080  -> 代理 5083-> 后端5083

代码:

在vue.config.js文件中添加如下代码：

devServer:{
  Proxy:{
   ‘/api’:{
     target:’http://localhost:5083/api’ ,//后端的端口号
//允许跨域
     ChangeOrigin:true,
     Ws:true,
     PathReWrite:{
   “^/api：“””
}
}
}
}

axios读取webapi,跨域问题解析

1. webapi接口通过swagger或者浏览器能直接访问成功并返回,但是当使用axios时.浏览器保错了.

1. 原因

浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了;

后台解决方案:

 后端设置接口允许跨域

//添加跨域策略

builder.Services.AddCors(options=>{
options.AddPolicy(“CorsPolicy”,opt=>
Opt.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().WithExposedHeaders(“X-Pagination”));
});

//使用跨域策略
 app.UserCors(“CorsPolicy”);