权限管理系统快速开发框架落地-前后端分离，如何破解跨域问题什么是跨域？跨域(CORS)请求：同源策略/SOP（Same

什么是跨域？

Access to XMLHttpRequest at '（请求路径）' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

跨域(CORS)请求：同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

跨域问题在前后端分离项目中非常常见，如果你的浏览器中打印了上述exception日志或者显示CORS error那就是跨域问题了。

想解决跨域问题也很简单，前端解决或者后端解决。

前端解决方式

本项目前端使用VUE，在VUE中用如下方式解决跨域问题。在vue.config.js 配置文件中添加以下代码，target修改为自己server api地址即可。

.net中解决方式

controller中为每个api接口添加，允许跨域

[HttpGet("{id}")]
public CommonResponse Department(long id){    
    HttpContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");    
    CommonResponse response =         
    CommonResponse.Success(_departmentService.GetDepartmentDtoWithChildren(id));    
    return response;
}

2. program.cs 全局注入，允许跨域（推荐）

builder.Services.AddCors(options =>{
    options.AddPolicy("CorsPolicy", opt => opt.AllowAnyOrigin()
    .AllowAnyHeader()                                        
    .AllowAnyMethod());
}

AllowAnyOrigin() 方法为添加允许的跨域源，参数为空代表允许所有源跨域。推荐的方法是在配置文件里添加信任源的白名单，program.cs中读取。

到这里就已经完成了，两种方式，选择一种即可，不过一般还是在后端解决比较好。

边搬砖边编码边总结，致力于开发一个能开箱即用的脚手架项目。欢迎来公众号看看：茶码源代码。