ajax跨域問(wèn)題以及解決方案
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)ajax跨域問(wèn)題以及解決方案，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)是一家專(zhuān)注于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站與策劃設(shè)計(jì),舞陽(yáng)網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:舞陽(yáng)等地區(qū)。舞陽(yáng)做網(wǎng)站價(jià)格咨詢(xún):028-86922220
復(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ò)開(kāi)發(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(見(jiàn)上面的案例).
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)簽中編寫(xiě)<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ù)名, 原理和上面是一樣的.
所以完成一開(kāi)時(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>上述就是小編為大家分享的ajax跨域問(wèn)題以及解決方案了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞標(biāo)題：ajax跨域問(wèn)題以及解決方案
文章轉(zhuǎn)載：http://jinyejixie.com/article22/iiesjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、網(wǎng)站內(nèi)鏈、、用戶體驗(yàn)、網(wǎng)站改版、外貿(mào)建站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 不同屏幕和設(shè)備上如何做用戶體驗(yàn)設(shè)計(jì) 2022-06-09
- 企業(yè)網(wǎng)站推廣怎樣提高用戶體驗(yàn)? 2023-04-16
- 提高網(wǎng)站的用戶體驗(yàn)，我們需要注意哪些細(xì)節(jié) 2021-04-01
- 如何提升網(wǎng)站頁(yè)面中的用戶體驗(yàn)度 2021-08-28
- 從網(wǎng)站結(jié)構(gòu)設(shè)計(jì)上如何做好用戶體驗(yàn)優(yōu)化？ 2022-09-17
- 不被熟知的用戶體驗(yàn)度 2016-11-03
- 網(wǎng)站設(shè)計(jì)體現(xiàn)出優(yōu)秀的用戶體驗(yàn) 2021-03-29
- 怎么樣提高用戶體驗(yàn)？ 2022-07-09
- 網(wǎng)站建設(shè)如何把握好相關(guān)閱讀與用戶體驗(yàn)的關(guān)系 2021-09-14
- 網(wǎng)站SEO該怎樣提高用戶體驗(yàn)度 2014-08-03
- 網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)分享：用戶體驗(yàn)設(shè)計(jì)提升需要注意的幾點(diǎn) 2022-12-01
- 如何提升網(wǎng)站設(shè)計(jì)的用戶體驗(yàn)？ 2021-06-01