怎么解决跨域问题（cors、nginx、jsonp）

什么是跨域问题

当前页面地址与请求URL的协议、域名、端口有任意不同：

• 网络协议不同，如http协议访问https协议。

• 端口不同，如80端口访问8080端口。

• 域名不同，如qianduanblog.com访问baidu.com。

• 子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。

• 域名和域名对应ip,如www.a.com访问20.205.28.90.

1、CORS解决跨域（常用）

在服务端带上Access-Control-Allow-Origin（服务器允许的跨域请求源）的响应头，它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

CORS分成简单请求和复杂请求（跨域资源共享 CORS 详解）：

• 简单请求：浏览器直接发出CORS请求，在头信息之中，增加一个Origin字段，用来说明本次请求来自哪个源（协议 + 域名 + 端口），服务器根据这个值决定是否同意这次请求。
• 非简单请求：是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求。"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

@Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
        response.setHeader("Access-Control-Allow-Methods", "POST,OPTIONS,GET");
        response.addHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, x-requested-with, Content-Type, Accept, routerule");
        String options = "OPTIONS";
        if (options.equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            filterChain.doFilter(servletRequest, servletResponse);
        }
    }

2、nginx反向代理解决跨域

把要跨域的接口写成本域的接口，通过nginx转发到跨域接口。

比如本域是http://www.aaa.com，要调用http://www.bbb.com/service接口，则直接请求http://www.aaa.com/service，

然后nginx来反向代理

server{
        listen 80;
        server_name  www.aaa.com;
 
        location /api{
            proxy_pass http://www.bbb.com/service;
        }
    }

3、jsonp解决跨域

原理是Web页面上调用js文件时不受跨域的影响，允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

jsonp只支持get请求，所以不常用