什么是跨域问题
当前页面地址与请求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请求，所以不常用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
var html = '<ul>';
for(var i = 0; i < result.length; i++)
{
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>