ajax跨域問(wèn)題以及解決方案

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)ajax跨域問(wèn)題以及解決方案，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站與策劃設(shè)計(jì),舞陽(yáng)網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:舞陽(yáng)等地區(qū)。舞陽(yáng)做網(wǎng)站價(jià)格咨詢: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 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;
}

在另一個(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" %>


 
 
 


 sendAjax

點(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)

 com.thetransactioncompany
 cors-filter
 2.5
 runtime

• 然后在web.xml中對(duì)過(guò)濾器進(jìn)行配置.

 
 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請(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ò)    

  • 上面的代碼中, 我們首先定義了doCallBack()函數(shù), 它接收一個(gè)字符串參數(shù), 并且會(huì)把接收到的字符串顯示出來(lái).

  • 然后在標(biāo)簽中編寫    sendAjax

    上述就是小編為大家分享的ajax跨域問(wèn)題以及解決方案了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

    
    網(wǎng)站題目：ajax跨域問(wèn)題以及解決方案
    文章URL：http://www.jiaotiyi.com/article/iiesjc.html