跨域问题原因及解决方案大全

1.跨域问题的出现需要同时满足哪些条件

1. 浏览器本身对跨域返回结果进行检测，进行拦截。
2. 跨域请求。
3. 请求类型是XMLHttpRequest请求。关于请求类型，可F12自行查看。

2.针对跨域出现的问题有一下解决思路

1.修改浏览器设置

2.使其请求类型不是XMLHttpRequest

3.调用方修改

4.被调用方修改     

以下会针对上述4种解决方案  一次阐述。

3.修改浏览器设置

打开浏览器安装路径，可用cmd打开，同时增加浏览器启动参数--disable-web-security。但是考虑到在所有客户端访浏览器都要修改，代价太大，不建议使用。

4.使其请求类型不是XMLHttpRequest

常用的解决方案是使用jsonp，进行调用，网上jsonp方案多且细。这里不再赘述。但是jsonp的解决方案有一些显见弊端

1.jsonp所调用的方法只能是Get类型

2.jsonp调用需要服务端编写代码，跟其约定参数，代码容错性低。

5.补充简单请求和非简单请求的知识点

1.简单请求常见的有:GET HEAD POST 其对应的请求header里面无自定义头，Content-Type为：text/plain multipart/form-data

application/x-www-form-urlencoded 的一种。

2.常见的非简单请求有PUT DELETE方法的ajax请求，发送json格式的ajax请求，带自定义头的ajax请求。

3.非简单请求在发起请求后，会先预检一次（OPTIONS）,预检通过后，才会发起真正的请求。如下图：

此时postJson为发送json格式的ajax请求。

6.被调用方解决

1.首先了解前后台分离项目的基本架构

基本调用流程：调用方的client请求到被调用方的Nginx服务器，Nginx将请求转发到自身的tomcat集群。

所以被调用方解决方案一般有两种:

• 在tomcat服务器对跨域请求进行响应设置
• 在Nginx对跨域请求进行响应设置

2.对tomcat服务器对跨域请求进行设置，我用的项目为SpringBoot，所有设置如下

@SpringBootApplication
public class AjaxserverApplication {

    public static void main(String[] args) {
        SpringApplication.run(AjaxserverApplication.class, args);
    }

    @Bean
    public FilterRegistrationBean filterRegistrationBean(){
        FilterRegistrationBean bean=new FilterRegistrationBean();
        bean.setUrlPatterns(Arrays.asList("/*"));
        bean.setFilter(new CrosFilter());
        return bean;
    }
}

在启动上注入拦截器。拦截器代码如下   不要恶心，哈哈，依次解读，也算对http请求有个初步了解

 @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse httpServletResponse=(HttpServletResponse)servletResponse;
        HttpServletRequest httpServletRequest=(HttpServletRequest)servletRequest;
        String origin = httpServletRequest.getHeader("Origin");
        if(!StringUtils.isEmpty(origin)){
            httpServletResponse.addHeader("Access-Control-Allow-Origin",origin);
        }
        String headers=httpServletRequest.getHeader("Access-Control-Request-Headers");
        if(!StringUtils.isEmpty(headers)){
            httpServletResponse.addHeader("Access-Control-Allow-Headers",headers);
        }
        httpServletResponse.addHeader("Access-Control-Allow-Methods","GET");
        httpServletResponse.addHeader("Access-Control-Max-Age","3600");
        httpServletResponse.addHeader("Access-Control-Allow-Credentials","true");

        filterChain.doFilter(servletRequest,servletResponse);
    }

 

• httpServletResponse.addHeader("Access-Control-Allow-Origin",origin);设置允许跨域的地址是什么，请求头中的Origin存的是调用方地址。

• httpServletResponse.addHeader("Access-Control-Allow-Headers",headers); 有时调用方发送的请求中headers里面会自定义头信息，那么被调用方也应该在响应中把headers返回回去。

• httpServletResponse.addHeader("Access-Control-Allow-Methods","GET"); 允许跨域调用的方法是什么类型。

• httpServletResponse.addHeader("Access-Control-Max-Age","3600"); 非简单请求，只要第一次通过OPTIONS检查 在1小时之内不会在调用OPTIONS进行检测

• httpServletResponse.addHeader("Access-Control-Allow-Credentials","true");带有Cookie的跨域请求，此值必须设置为true。

有时为了简便，也可以设置，允许跨域的地址为所有，允许跨域的方法为所有，如下，但是不建议使用

httpServletResponse.addHeader("Access-Control-Allow-Origin","*");
httpServletResponse.addHeader("Access-Control-Allow-Methods","*");

3.在被调用方的Nginx对跨域请求进行响应设置

此时Nginx上的设置与过滤器设置内容一样，都在是被调用方的响应头信息中添加参数，防止跨域问题。

但是值得注意的是Nginx的书写格式，值中不允许出现大写,且所有横杠都应替换为低杠。if判断后必须留有空格。可以用过nginx.exe -t 进行配置文件的校验工作。

7.调用方解决方案

1. 配置调用方的Nginx服务器，内容如下

调用方为8081 被调用方为8080。以前，跨域调用get方法路径为:http://localhost:8080/test/get 配置完调用方Nginx之后请求路径更改为http://a.com/ajaxserver/get即可。

调用方解决是把跨域请求写为相对路径，被调用方解决跨域请求是绝对路径，被调用方在响应信息中填写设置。

8.Spring框架

如果你使用的Spring框架，在跨域调用的方法或者方法所在的类上加上@CrossOrigin 即可。其实现原理，可进源码查看，设置与上几乎无二。

目录

1.跨域问题的出现需要同时满足哪些条件

2.针对跨域出现的问题有一下解决思路

3.修改浏览器设置  

4.使其请求类型不是XMLHttpRequest

5.补充简单请求和非简单请求的知识点

6.被调用方解决

---