跨域问题解决(完整) 跨域问题解决(完整)

在开发前后端完全分离的系统中，服务端代码属于一个工程，前端代码属于另一个工程，前端开发人员在进行接口对接时，会产生跨域访问的问题。究其原因归根是浏览器中的JS同源策略。

本文大概流程：

JS同源策略
nginx解决跨域
Springboot 解决跨域
浏览器插件解决跨域

前端ajax的jsoup啥的就不在这说了，各个框架都有自己的一套解决方案，百度一下即可。
JS同源策略：
即同协议，同域名，同端口。

同协议：http和https就是不同协议
同域名：略
同端口：略

如果三者有一个不同，则就会产生跨域访问。
1. nginx解决

location / { add_header Access-Control-Allow-Origin '*'; proxy_pass http://127.0.0.1:8080; }

或者在server里添加

add_header Access-Control-Allow-Origin '*';

加这个是干嘛用的呢？是把nginx拦截到的请求里加请求头

Access-Control-Allow-Origin '*';

表示接受跨域请求，然后再进行请求转发。
一般这样下来就可以实现跨域了，如果还没有解决你的问题，请直接看第三点。
如果你没有用到nginx，那么请看下面。
2. SpringBoot项目中解决

/** * Created by Fant.J. */ @Component public class CORSConfiguration extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry registry){ registry //配置可以被跨域的路径 .addMapping("/**") //允许所有的请求方法访问该跨域资源服务器如：POST、GET、PUT、DELETE等。 .allowedMethods("*") //允许所有的请求域名访问我们的跨域资源 .allowedOrigins("*") //允许所有的请求header访问可以自定义设置任意请求头信息，如："X-YAUTH-TOKEN" .allowedHeaders("*"); } }

都有注释就不多哔哔了。。
3. 浏览器插件解决
如果前两者还不可以，那么就需要放大招了，直接在浏览器上安装插件