關(guān)于Ajax跨域問(wèn)題及解決方案詳析
復(fù)現(xiàn)ajax跨域問(wèn)題
做兩個(gè)簡(jiǎn)單的小項(xiàng)目復(fù)現(xiàn)ajax跨域問(wèn)題. 后端語(yǔ)言使用java
首先是一個(gè)簡(jiǎn)單的訂單系統(tǒng), 通過(guò)訪問(wèn)/loadorderlist, 最終以json串形式返回訂單集合. 該項(xiàng)目使用tomcat發(fā)布在7070端口.
@requestmapping("/loadorderlist")
@responsebody
public list<order> loadorderlist(string uid){
//模擬訂單數(shù)據(jù)
order o1 = new order();
o1.setid("111");
o1.settotal(333.33);
o1.setdate("2019-4-29");
order o2 = new order();
o2.setid("222");
o2.settotal(444.44);
o2.setdate("2019-5-29");
order o3 = new order();
o3.setid("333");
o3.settotal(555.55);
o3.setdate("2019-6-29");
list<order> list = new arraylist<>();
list.add(o1);
list.add(o2);
list.add(o3);
return list;
}
在另一個(gè)項(xiàng)目中做一個(gè)向訂單系統(tǒng)發(fā)送一個(gè)ajax請(qǐng)求, 獲取訂單集合. 該項(xiàng)目使用tomcat插件發(fā)布在9090端口.
//index.jsp
<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html>
<head>
<title>title</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
function sendajax() {
$.post("http://localhost:7070/order/loadorderlist", "uid=1234", function (data) {
alert(data);
});
}
</script>
</head>
<body>
<a href="javascript:sendajax()" rel="external nofollow" rel="external nofollow" >sendajax</a>
</body>
</html>
點(diǎn)擊sendajax超鏈接向訂單系統(tǒng)發(fā)送ajax請(qǐng)求.
通過(guò)開發(fā)者工具發(fā)現(xiàn)雖然服務(wù)器以狀態(tài)碼200響應(yīng)回來(lái), 但是控制臺(tái)卻報(bào)錯(cuò)了.
這就是ajax跨域出錯(cuò)的一種表現(xiàn), 下面分析原因.
ajax跨域介紹
- ajax跨域問(wèn)題是由瀏覽器的同源策略造成的, 首先要理解源這個(gè)概念.
- 我們可以通過(guò)協(xié)議+域名+端口確定一個(gè)源. 在上面的示例中, 你可以把一個(gè)項(xiàng)目理解為一個(gè)源. ajax請(qǐng)求可以對(duì)源內(nèi)的資源發(fā)起訪問(wèn), 但是不同源之間進(jìn)行ajax就會(huì)有問(wèn)題.
- 當(dāng)向不同源的資源發(fā)起ajax請(qǐng)求時(shí), 瀏覽器會(huì)加上origin字段來(lái)標(biāo)識(shí)源
accept: */* accept-encoding: gzip, deflate, br accept-language: zh-cn,zh;q=0.9 connection: keep-alive content-length: 8 content-type: application/x-www-form-urlencoded; charset=utf-8 host: localhost:7070 origin: http://localhost:9090 協(xié)議+域名+端口
- 服務(wù)器會(huì)根據(jù)origin字段決定是否同意這次請(qǐng)求, 如果origin指定的源不在許可范圍內(nèi), 服務(wù)器會(huì)返回一個(gè)不帶有access-control-allow-origin字段的響應(yīng). 瀏覽器解析時(shí)發(fā)現(xiàn)缺少了這個(gè)字段, 就會(huì)報(bào)錯(cuò). 這種錯(cuò)誤不能通過(guò)狀態(tài)碼識(shí)別, 因?yàn)闋顟B(tài)碼很有可能就是200(見上面的案例).
ajax跨域解決方案
下面介紹最常用ajax跨域解決方案.
一. 在服務(wù)端添加響應(yīng)頭access-control-allow-origin
- 既然我們已經(jīng)知道了ajax跨域失敗是因?yàn)轫憫?yīng)中缺少了響應(yīng)頭access-control-allow-origin, 那么就想辦法加上去.
- 以java項(xiàng)目為例, 在后端我們使用corsfilter過(guò)濾器加上該響應(yīng)頭.
- (假設(shè)是maven項(xiàng)目), 首先在pom.xml中添加坐標(biāo)
<dependency> <groupid>com.thetransactioncompany</groupid> <artifactid>cors-filter</artifactid> <version>2.5</version> <scope>runtime</scope> </dependency>
- 然后在web.xml中對(duì)過(guò)濾器進(jìn)行配置.
<filter> <filter-name>cors</filter-name> <filter-class>com.thetransactioncompany.cors.corsfilter</filter-class> <init-param> <param-name>cors.alloworigin</param-name><!--這個(gè)標(biāo)簽是關(guān)鍵, *代表所有源都能訪問(wèn)--> <param-value>*</param-value> </init-param> <init-param> <param-name>cors.supportedmethods</param-name> <param-value>get, post, head, put, delete</param-value> </init-param> <init-param> <param-name>cors.supportedheaders</param-name> <param-value>accept, origin, x-requested-with, content-type, last-modified</param-value> </init-param> <init-param> <param-name>cors.exposedheaders</param-name> <param-value>set-cookie</param-value> </init-param> <init-param> <param-name>cors.supportscredentials</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>cors</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
配置后重啟訂單項(xiàng)目, 再次發(fā)起ajax請(qǐng)求可以看到成功返回?cái)?shù)據(jù), 響應(yīng)頭中包含了access-control-allow-origin, 值為發(fā)起ajax請(qǐng)求的源.
二. 使用jsonp解決
- 上面直接通過(guò)過(guò)濾器添加響應(yīng)頭的方法可以說(shuō)是對(duì)癥下藥, 那么還有沒(méi)有什么偏方呢?
- 還真的有. 在jsp文件中經(jīng)常通過(guò)通過(guò)<script>標(biāo)簽引入一段js代碼, 這段代碼通常來(lái)源于網(wǎng)絡(luò), 也就是不同源. 那么我們不妨通過(guò)<srcipt>標(biāo)簽完成ajax請(qǐng)求, 這樣便順帶解決了跨域問(wèn)題.
- 下面還是沿用上面的案例進(jìn)行演示.
- 我們對(duì)發(fā)送ajax的jsp進(jìn)行修改
<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html>
<head>
<title>title</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
function docallback(data){
var str = json.stringify(data);
alert(str);
}
</script>
</head>
<body>
<script src="http://localhost:7070/order/loadorderlist3?uid=111&callback=docallback"></script>
</body>
</html>
- 上面的代碼中, 我們首先定義了docallback()函數(shù), 它接收一個(gè)字符串參數(shù), 并且會(huì)把接收到的字符串顯示出來(lái).
- 然后在<body>標(biāo)簽中編寫<script>標(biāo)簽, 我們將通過(guò)<script>標(biāo)簽請(qǐng)求訂單系統(tǒng), 訂單系統(tǒng)將會(huì)返回一段js代碼, 這段js代碼會(huì)調(diào)用docallback()方法.
- 為了能夠拼接出
docallback(字符串參數(shù)...)js代碼, 我們?cè)谟唵蜗到y(tǒng)中作如下操作.
@requestmapping("/loadorderlist3")
@responsebody
public string loadorderlist3(string uid, string callback){
//模擬訂單數(shù)據(jù)
order o1 = new order();
o1.setid("111");
o1.settotal(333.33);
o1.setdate("2019-4-29");
order o2 = new order();
o2.setid("222");
o2.settotal(444.44);
o2.setdate("2019-5-29");
order o3 = new order();
o3.setid("333");
o3.settotal(555.55);
o3.setdate("2019-6-29");
list<order> list = new arraylist<>();
list.add(o1);
list.add(o2);
list.add(o3);
//拼接js代碼
string result = callback + "(" + json.tojsonstring(list) + ")";
return result;
}
這個(gè)想法是不是很妙? 明白這個(gè)原理之后, 我們可以使用jquery方便進(jìn)行jsonp操作, 在上面的代碼中我們?nèi)藶橹付艘粋€(gè)名為docallback的函數(shù), 而jquery會(huì)隨機(jī)用時(shí)間戳生成一個(gè)函數(shù)名, 原理和上面是一樣的.
所以完成一開時(shí)點(diǎn)擊超鏈接發(fā)送ajax請(qǐng)求只需要如下幾步.
<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html>
<head>
<title>title</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
function sendajax(){
$.getjson("http://localhost:7070/order/loadorderlist3?callback=?","uid=111",
function (data) {
var str = json.stringify(data);
alert(str);
});
}
</script>
</head>
<body>
<a href="javascript:sendajax()">sendajax</a>
</body>
</html>
小結(jié)
上面兩種解決辦法在思路上有著本質(zhì)的不同. 方案一抓住cors跨域訪問(wèn)問(wèn)題的本質(zhì), 在后端加上響應(yīng)頭解決跨域問(wèn)題. 方案二jsonp利用的是<script>標(biāo)簽?zāi)軌蚩缬颢@取js代碼的特性, 繞過(guò)跨域問(wèn)題.
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)碩編程的支持。
學(xué)習(xí)AJAX