跨域问题解决(完整)

在开发前后端完全分离的系统中，服务端代码属于一个工程，前端代码属于另一个工程，前端开发人员在进行接口对接时，会产生跨域访问的问题。究其原因归根是浏览器中的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攻击。