跨域问题解决(完整)

161 阅读2分钟
原文链接: www.jianshu.com

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

本文大概流程:

  1. JS同源策略
  2. nginx解决跨域
  3. Springboot 解决跨域
  4. 浏览器插件解决跨域

前端ajax的jsoup啥的就不在这说了,各个框架都有自己的一套解决方案,百度一下即可。

JS同源策略:

即同协议,同域名,同端口。
  1. 同协议:http和https就是不同协议
  2. 同域名:略
  3. 同端口:略

如果三者有一个不同,则就会产生跨域访问。

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攻击。