什么是跨域問題?
跨域問題來源於JavaScript的"同源策略"，即只有 協議+主機名+端口號 (如存在)相同，則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源，不能訪問和操作其他域下的資源。跨域問題是針對JS和ajax的，html本身沒有跨域問題。
查看瀏覽器開發者工具Console報錯：
Failed to load http://a.a.com:8080/A/FromServlet?userName=123: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://b.b.com:8080' is therefore not allowed access.
http://www.abc.com/a/b 調用 http://www.abc.com/d/c（非跨域）
http://www.abc.com/a/b 調用 http://www.def.com/a/b （跨域：域名不一致）
http://www.abc.com:8080/a/b 調用 http://www.abc.com:8081/d/c （跨域：端口不一致）
http://www.abc.com/a/b 調用 https://www.abc.com/d/c （跨域：協議不同）
請注意：localhost和127.0.0.1雖然都指向本機，但也屬於跨域。
跨域問題怎么解決？
1、響應頭添加Header允許訪問
2、jsonp 只支持get請求不支持post請求
3、httpClient內部轉發
4、使用接口網關——nginx、springcloud zuul (互聯網公司常規解決方案)
解決方式1：響應頭添加Header允許訪問
跨域資源共享（CORS）Cross-Origin Resource Sharing
response.addHeader(‘Access-Control-Allow-Origin:*’);//允許所有來源訪問
response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允許訪問的方式
解決方式2：jsonp 只支持get請求不支持post請求
用法：①dataType改為jsonp ②jsonp : "jsonpCallback"————發送到后端實際為http://a.a.com/a/FromServlet?userName=644064&jsonpCallback=jQueryxxx ③后端獲取get請求中的jsonpCallback ④構造回調結構
$.ajax({
type : "GET",
async : false,
url : "http://a.a.com/a/FromServlet?userName=644064",
dataType : "jsonp",//數據類型為jsonp
jsonp : "jsonpCallback",//服務端用於接收callback調用的function名的參數
success : function(data) {
alert(data["userName"]);
},
error : function() {
alert('fail');
}
});
//后端
String jsonpCallback = request.getParameter("jsonpCallback");
//構造回調函數格式jsonpCallback(數據)
resp.getWriter().println(jsonpCallback+"("+jsonObject.toJSONString()+")");
JSONP實現原理
在同源策略下，在某個服務器下的頁面是無法獲取到該服務器以外的數據的，即一般的ajax是不能進行跨域請求的。但 img、iframe 、script等標簽是個例外，這些標簽可以通過src屬性請求到其他服務器上的數據。利用<script>標簽的開放策略，我們可以實現跨域請求數據，當然這需要服務器端的配合。 Jquery中ajax的核心是通過 XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加<script>標簽來調用服務器提供的 js腳本。
當我們正常地請求一個JSON數據的時候，服務端返回的是一串JSON類型的數據，而我們使用 JSONP模式來請求數據的時候服務端返回的是一段可執行的JavaScript代碼。因為jsonp 跨域的原理就是用的動態加載<script>的src ，所以我們只能把參數通過url的方式傳遞,所以jsonp的 type類型只能是get ！
示例：
$.ajax({
url: 'http://192.168.10.46/demo/test.jsp', //不同的域
type: 'GET', // jsonp模式只有GET 是合法的
data: {
'action': 'aaron'
},
dataType: 'jsonp', // 數據類型
jsonp: 'jsonpCallback', // 指定回調函數名，與服務器端接收的一致，並回傳回來
})
其實jquery 內部會轉化成
http://192.168.10.46/demo/test.jsp?jsonpCallback=jQuery202003573935762227615_1402643146875&action=aaron
然后動態加載
<script type="text/javascript"src="http://192.168.10.46/demo/test.jsp?jsonpCallback= jQuery202003573935762227615_1402643146875&action=aaron"></script>
然后后端就會執行jsonpCallback(傳遞參數 )，把數據通過實參的形式發送出去。
使用JSONP 模式來請求數據的整個流程：客戶端發送一個請求，規定一個可執行的函數名（這里就是 jQuery做了封裝的處理，自動幫你生成回調函數並把數據取出來供success屬性方法來調用,而不是傳遞的一個回調句柄），服務器端接受了這個 jsonpCallback函數名，然后把數據通過實參的形式發送出去
（在jquery 源碼中， jsonp的實現方式是動態添加<script>標簽來調用服務器提供的 js腳本。jquery 會在window對象中加載一個全局的函數，當 <script>代碼插入時函數執行，執行完畢后就 <script>會被移除。同時jquery還對非跨域的請求進行了優化，如果這個請求是在同一個域名下那么他就會像正常的 Ajax請求一樣工作。）
解決方式3：httpClient內部轉發
實現原理很簡單，若想在B站點中通過Ajax訪問A站點獲取結果，固然有ajax跨域問題，但在B站點中訪問B站點獲取結果，不存在跨域問題，這種方式實際上是在B站點中ajax請求訪問B站點的HttpClient，再通過HttpClient轉發請求獲取A站點的數據結果。但這種方式產生了兩次請求，效率低，但內部請求，抓包工具無法分析，安全。
$.ajax({
type : "GET",
async : false,
url : "http://b.b.com:8080/B/FromAjaxservlet?userName=644064",
dataType : "json",
success : function(data) {
alert(data["userName"]);
},
error : function() {
alert('fail');
}
});
@WebServlet("/FromAjaxservlet")
public class FromAjaxservlet extends HttpServlet{
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
//創建默認連接
CloseableHttpClient httpClient = HttpClients.createDefault();
//創建HttpGet對象,處理get請求,轉發到A站點
HttpGet httpGet = new HttpGet("http://a.a.com:8080/A/FromServlet?userName="+req.getParameter("userName"));
//執行
CloseableHttpResponse response = httpClient.execute(httpGet);
int code = response.getStatusLine().getStatusCode();
//獲取狀態
System.out.println("http請求結果為:"+code);
if(code == 200){
//獲取A站點返回的結果
String result = EntityUtils.toString(response.getEntity());
System.out.println(result);
//把結果返回給B站點
resp.getWriter().print(result);
}
response.close();
httpClient.close();
} catch (Exception e) {
}
}
}
解決方式4：使用nginx搭建企業級接口網關方式
www.a.a.com不能直接請求www.b.b.com的內容，可以通過nginx，根據同域名，但項目名不同進行區分。什么意思呢？這么說可能有點抽象。假設我們公司域名叫www.nginxtest.com
當我們需要訪問www.a.a.com通過www.nginxtest.com/A訪問，並通過nginx轉發到www.a.a.com
當我們需要訪問www.b.b.com通過www.nginxtest.com/B訪問，並通過nginx轉發到www.a.a.com
我們訪問公司的域名時，是"同源"的，只是項目名不同，此時項目名的作用只是為了區分，方便轉發。如果你還不理解的話，先看看我是怎么進行配置的：
server {
listen 80;
server_name www.nginxtest.com;
location /A {
proxy_pass http://a.a.com:81;
index index.html index.htm;
}
location /B {
proxy_pass http://b.b.com:81;
index index.html index.htm;
}
}
我們訪問以www.nginxtest.com開頭且端口為80的網址，nginx將會進行攔截匹配，若項目名為A，則分發到a.a.com:81。實際上就是通過"同源"的域名，不同的項目名進行區分，通過nginx攔截匹配，轉發到對應的網址。整個過程，兩次請求，第一次請求nginx服務器，第二次nginx服務器通過攔截匹配分發到對應的網址。
解決方式5：使用Spring Cloud zuul接口網關
---------------------
作者：itcats_cn
來源：CSDN
原文：https://blog.csdn.net/itcats_cn/article/details/82318092
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！