復(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")@ResponseBodypublic 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, brAccept-Language: zh-CN,zh;q=0.9Connection: keep-aliveContent-Length: 8Content-Type: application/x-www-form-urlencoded; charset=UTF-8Host: localhost:7070Origin: 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(見上面的案例).
新聞熱點(diǎn)
疑難解答
圖片精選
