Ajax 是一種獨(dú)立于 Web 服務(wù)器軟件的瀏覽器技術(shù),Ajax不需要任何瀏覽器插件,但需要用戶允許javascript在瀏覽器上執(zhí)行,那ajax為什么不能跨域?下面來我們就來給大家講解一下。
解決方式1:響應(yīng)頭添加Header允許訪問
跨域資源共享(CORS)Cross-Origin Resource Sharing
這個(gè)跨域訪問的解決方案的安全基礎(chǔ)是基于"Javascript無法控制該HTTP頭"
它需要通過目標(biāo)域返回的HTTP頭來授權(quán)是否允許跨域訪問。
response.addHeader(‘Access-Control-Allow-Origin:*’);//允許所有來源訪問 response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允許訪問的方式
解決方式2:jsonp 只支持get請求不支持post請求
用法:
①dataType改為jsonp
②jsonp : "jsonpCallback"————發(fā)送到后端實(shí)際為http://a.a.com/a/FromServlet?userName=644064&jsonpCallback=jQueryxxx
③后端獲取get請求中的jsonpCallback
④構(gòu)造回調(diào)結(jié)構(gòu)
$.ajax( { type: "GET" , async: false , url: "http://a.a.com/a/FromServlet?userName=644064" , dataType: "jsonp", //數(shù)據(jù)類型為jsonp jsonp: "jsonpCallback", //服務(wù)端用于接收callback調(diào)用的function名的參數(shù) success: function (data) { alert(data["userName"]); } , error: function () { alert('fail'); } });
//后端 String jsonpCallback = request.getParameter("jsonpCallback"); //構(gòu)造回調(diào)函數(shù)格式j(luò)sonpCallback(數(shù)據(jù)) resp.getWriter() .println(jsonpCallback + "(" + jsonObject.toJSonString() + ")");
解決方式3:httpClient內(nèi)部轉(zhuǎn)發(fā)
實(shí)現(xiàn)原理很簡單,若想在B站點(diǎn)中通過Ajax訪問A站點(diǎn)獲取結(jié)果,固然有ajax跨域問題,但在B站點(diǎn)中訪問B站點(diǎn)獲取結(jié)果,不存在跨域問題,這種方式實(shí)際上是在B站點(diǎn)中ajax請求訪問B站點(diǎn)的HttpClient,再通過HttpClient轉(zhuǎn)發(fā)請求獲取A站點(diǎn)的數(shù)據(jù)結(jié)果。但這種方式產(chǎn)生了兩次請求,效率低,但內(nèi)部請求,抓包工具無法分析,安全。
$.ajax( { type: "GET" , async: false , url: "http://b.b.com:8080/B/FromAjaxservlet?userName=644064" , dataType: "json" , success: function (data) { alert(data["userName"]); } , error: function () { alert('fail'); } });
@WebServlet("/FromAjaxservlet") public class FromAjaxservlet extends HttpServlet { protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { try { //創(chuàng)建默認(rèn)連接 CloseableHttpClient httpClient = HttpClients.createDefault(); //創(chuàng)建HttpGet對象,處理get請求,轉(zhuǎn)發(fā)到A站點(diǎn) HttpGet httpGet = new HttpGet("http://a.a.com:8080/A/FromServlet?userName=" + req.getParameter("userName")); //執(zhí)行 CloseableHttpResponse response = httpClient.execute(httpGet); int code = response.getStatusLine() .getStatusCode(); //獲取狀態(tài) System.out.println("http請求結(jié)果為:" + code); if (code == 200) { //獲取A站點(diǎn)返回的結(jié)果 String result = EntityUtils.toString(response.getEntity()); System.out.println(result); //把結(jié)果返回給B站點(diǎn) resp.getWriter() .print(result); } response.close(); httpClient.close(); } catch (Exception e) {} } }
解決方式4:使用nginx搭建企業(yè)級接口網(wǎng)關(guān)方式
www.a.a.com不能直接請求www.b.b.com的內(nèi)容,可以通過nginx,根據(jù)同域名,但項(xiàng)目名不同進(jìn)行區(qū)分。什么意思呢?這么說可能有點(diǎn)抽象。假設(shè)我們公司域名叫www.nginxtest.com
當(dāng)我們需要訪問www.a.a.com通過m.qsjlcn.com/A訪問,并通過nginx轉(zhuǎn)發(fā)到www.a.a.com
當(dāng)我們需要訪問www.b.b.com通過www.funengwang.com/B訪問,并通過nginx轉(zhuǎn)發(fā)到www.a.a.com
我們訪問公司的域名時(shí),是"同源"的,只是項(xiàng)目名不同,此時(shí)項(xiàng)目名的作用只是為了區(qū)分,方便轉(zhuǎn)發(fā)。如果你還不理解的話,先看看我是怎么進(jìn)行配置的:
server { listen 80; server_name m.qsjlcn.com; location / A { proxy_pass http: //a.a.com:81; index index.html index.htm; } location / B { proxy_pass http: //b.b.com:81; index index.html index.htm; } }
我們訪問以www.funengwang.com開頭且端口為80的網(wǎng)址,nginx將會(huì)進(jìn)行攔截匹配,若項(xiàng)目名為A,則分發(fā)到a.a.com:81。實(shí)際上就是通過"同源"的域名,不同的項(xiàng)目名進(jìn)行區(qū)分,通過nginx攔截匹配,轉(zhuǎn)發(fā)到對應(yīng)的網(wǎng)址。整個(gè)過程,兩次請求,第一次請求nginx服務(wù)器,第二次nginx服務(wù)器通過攔截匹配分發(fā)到對應(yīng)的網(wǎng)址。
Ajax不能跨域我們可以使用以上這種方法去解決,實(shí)現(xiàn)不同的域之間相互請求資源。最后大家如果想要了解更多其他工具教程知識,敬請關(guān)注java相關(guān)欄目。
本文鏈接:
本文章“ajax跨域方法?”已幫助 195 人
免責(zé)聲明:本信息由用戶發(fā)布,本站不承擔(dān)本信息引起的任何交易及知識產(chǎn)權(quán)侵權(quán)的法律責(zé)任!
本文由賦能網(wǎng) 整理發(fā)布。了解更多培訓(xùn)機(jī)構(gòu)》培訓(xùn)課程》學(xué)習(xí)資訊》課程優(yōu)惠》課程開班》學(xué)校地址等機(jī)構(gòu)信息,可以留下您的聯(lián)系方式,讓課程老師跟你詳細(xì)解答:
咨詢熱線:4008-569-579