這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)ajax跨域問題以及解決方案，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、做網(wǎng)站與策劃設(shè)計,舞陽網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:舞陽等地區(qū)。舞陽做網(wǎng)站價格咨詢:028-86922220
復(fù)現(xiàn)Ajax跨域問題
做兩個簡單的小項(xiàng)目復(fù)現(xiàn)Ajax跨域問題. 后端語言使用Java
首先是一個簡單的訂單系統(tǒng), 通過訪問/loadOrderList, 最終以json串形式返回訂單集合. 該項(xiàng)目使用Tomcat發(fā)布在7070端口.
@RequestMapping("/loadOrderList")
@ResponseBody
public List 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 list = new ArrayList<>();
list.add(o1);
list.add(o2);
list.add(o3);
return list;
}在另一個項(xiàng)目中做一個向訂單系統(tǒng)發(fā)送一個ajax請求, 獲取訂單集合. 該項(xiàng)目使用Tomcat插件發(fā)布在9090端口.
//index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Title
function sendAjax() {
$.post("http://localhost:7070/order/loadOrderList", "uid=1234", function (data) {
alert(data);
});
}
sendAjax
點(diǎn)擊sendAjax超鏈接向訂單系統(tǒng)發(fā)送ajax請求.
通過開發(fā)者工具發(fā)現(xiàn)雖然服務(wù)器以狀態(tài)碼200響應(yīng)回來, 但是控制臺卻報錯了.
這就是Ajax跨域出錯的一種表現(xiàn), 下面分析原因.
Ajax跨域介紹
Ajax跨域問題是由瀏覽器的同源策略造成的, 首先要理解源這個概念.
我們可以通過協(xié)議+域名+端口確定一個源. 在上面的示例中, 你可以把一個項(xiàng)目理解為一個源. Ajax請求可以對源內(nèi)的資源發(fā)起訪問, 但是不同源之間進(jìn)行Ajax就會有問題.
當(dāng)向不同源的資源發(fā)起Ajax請求時, 瀏覽器會加上Origin字段來標(biāo)識源
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ù)器會根據(jù)Origin字段決定是否同意這次請求, 如果Origin指定的源不在許可范圍內(nèi), 服務(wù)器會返回一個不帶有Access-Control-Allow-Origin字段的響應(yīng). 瀏覽器解析時發(fā)現(xiàn)缺少了這個字段, 就會報錯. 這種錯誤不能通過狀態(tài)碼識別, 因?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過濾器加上該響應(yīng)頭.
(假設(shè)是Maven項(xiàng)目), 首先在pom.xml中添加坐標(biāo)
com.thetransactioncompany
cors-filter
2.5
runtime
CORS
com.thetransactioncompany.cors.CORSFilter
cors.allowOrigin
*
cors.supportedMethods
GET, POST, HEAD, PUT, DELETE
cors.supportedHeaders
Accept, Origin, X-Requested-With, Content-Type, Last-Modified
cors.exposedHeaders
Set-Cookie
cors.supportsCredentials
true
CORS
/*
配置后重啟訂單項(xiàng)目, 再次發(fā)起Ajax請求可以看到成功返回數(shù)據(jù), 響應(yīng)頭中包含了Access-Control-Allow-Origin, 值為發(fā)起Ajax請求的源.
二. 使用JSONP解決
重慶分公司
重慶分公司