跨域问题解决(完整)
2018-05-14 本文已影响1186人
FantJ
在开发前后端完全分离的系统中,服务端代码属于一个工程,前端代码属于另一个工程,前端开发人员在进行接口对接时,会产生跨域访问的问题。究其原因归根是浏览器中的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. 浏览器插件解决
如果前两者还不可以,那么就需要放大招了,直接在浏览器上安装插件
需要翻墙去google插件商城下载。
用的时候把开关打开就行,不用的话就关了,不然很容易受CSRF攻击。