什麼是跨域問題
當前頁面地址與請求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>