Ajax跨域問題及解決方案（jsonp，cors）
跨域
跨域有三個條件，滿足任何一個條件就是跨域
1：服務(wù)器端口不一致
2：協(xié)議不一致
3：域名不一致
解決方案：
1.jsonp
在遠(yuǎn)程服務(wù)器上設(shè)法動態(tài)的把數(shù)據(jù)裝進(jìn)js格式的文本代碼段中，供客戶端調(diào)用和進(jìn)一步處理；在前臺通過動態(tài)添加script標(biāo)簽及src屬性，表面看上去與ajax極為相似，但是，這和ajax并沒有任何關(guān)系；為了便于使用及交流，逐漸形成了一中非正式傳輸協(xié)議，人們把它稱作 jsonp 。
代碼如下：
html：
<body> <form action="/" method="post" enctype="multipart/form-data"> <input type="text" name="xinxi" id="info"><br> <input type="file" name="file" id="file"><br> <input type="button" value="提交" name="submit" id="btn"> </form></body><script src="./jquery.js"></script><script> //提前寫好函數(shù)，調(diào)用函數(shù)需要傳參 function callback(data){ alert(data); } //動態(tài)添加script標(biāo)簽及src屬性 $("#btn").on("click",function(){ var sc = document.createElement("script"); sc.src = "http://soul:8888/kuayu?cb=callback"; $("head").append(sc); })</script> js：
var http = require("http"); var url = require("url"); var server = http.createServer(); server.listen("8888",function(){ console.log("8888"); }); server.on("request",function(req,res){ var urls = url.parse(req.url,true); if(urls.pathname == "/kuayu"){ res.end("callback("jsonp")");//返回的數(shù)據(jù)需是前端定義的函數(shù)調(diào)用的形式 } });運行結(jié)果：
總結(jié)一下：
jsonp的一個要點就是允許用戶傳遞一個callback參數(shù)給服務(wù)端， 然后服務(wù)端返回數(shù)據(jù)時會將這個callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù)， 這樣客戶端就可以隨意定制自己的函數(shù)來自動處理返回數(shù)據(jù)了。
發(fā)現(xiàn)凡是擁有"src"這個屬性的標(biāo)簽都擁有跨域的能力，比如script、img、iframe； src 的能力就是把遠(yuǎn)程的數(shù)據(jù)資源加載到本地(圖片、JS代碼等);
2.cors
cors跨域的核心點是在服務(wù)端代碼中設(shè)置一個響應(yīng)頭即可
res.setHeader("Access-Control-Allow-Origin","*");
html：
<body> <form action="/" method="post" enctype="multipart/form-data" id="form"> <input type="text" name="xinxi" id="info"><br> <input type="button" value="提交" name="submit" id="btn"> </form></body><script src="./jquery.js"></script><script> $("#btn").on("click", function () { $.ajax({ url: "http://soul:8888/kuayu", type:"delete", async:false, success: function (data) { alert(data); },}) })</script>js代碼：
<body> <form action="/" method="post" enctype="multipart/form-data" id="form"> <input type="text" name="xinxi" id="info"><br> <input type="button" value="提交" name="submit" id="btn"> </form></body><script src="./jquery.js"></script><script> $("#btn").on("click", function () { $.ajax({ url: "http://soul:8888/kuayu", type:"delete", async:false, success: function (data) { alert(data); },}) })</script>效果：
很多人也認(rèn)為使用CORS解決跨域很簡單，只需要在服務(wù)器添加響應(yīng)頭 “ Access-Control-Allow-Origin ：* ” 就可以了，
其實不然，因為在CORS中，所有的跨域請求被分為了兩種類型，一種是簡單請求，一種是復(fù)雜請求 (嚴(yán)格來說應(yīng)該叫‘需預(yù)檢請求")；簡單請求與普通的ajax請求無異；但復(fù)雜請求，必須在正式發(fā)送請求前先發(fā)送一個OPTIONS方法的請求已得到服務(wù)器的同意，若沒有得到服務(wù)器的同意，瀏覽器不會發(fā)送正式請求；
滿足以下所有條件，被視為簡單類型的請求：
1：請求方法必須是 GET、HEAD、POST中的一種，其他方法不行；
2：請求頭類型只能是 Accept、Accept-Language、Content-Language、Content-Type，添加其他額外請求頭不行；
3：請求頭 Content-Type 如果有，值只能是 text/plain、multipart/form-data、application/x-www-form-urlencoded 中的一種，其他值不行；
4：請求中的任意 XMLHttpRequestUpload 對象均沒有注冊任何事件監(jiān)聽器；
5：請求中沒有使用 ReadableStream 對象。（以上摘自西嶺老濕微信公眾號）
總結(jié)一下：
如果請求方式為get和post簡單請求，則只需要設(shè)置響應(yīng)頭：res.setHeader("Access-Control-Allow-Origin","*");來允許某一個域 或者 所有域進(jìn)行數(shù)據(jù)共享；
若是其他方式的請求，會在發(fā)送真正的請求之前發(fā)送一個options請求，通過options請求里設(shè)置：res.setHeader("Access-Control-Allow-Methods", "DELETE")，
告知服務(wù)器正式請求會使用哪一種 HTTP 請求方法。
總結(jié)
以上所述是小編給大家介紹的Ajax跨域問題及解決方案（jsonp，cors）,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章：
1. 使用Ajax實現(xiàn)進(jìn)度條的繪制2. 實現(xiàn)AJAX異步調(diào)用和局部刷新的基本步驟3. ajax實現(xiàn)簡單登錄頁面4. Ajax請求超時與網(wǎng)絡(luò)異常處理圖文詳解5. 使用ajax跨域調(diào)用springboot框架的api傳輸文件6. 通過Ajax請求動態(tài)填充頁面數(shù)據(jù)的實例7. 關(guān)于ajax異步訪問數(shù)據(jù)的問題8. ajax異步讀取后臺傳遞回的下拉選項的值方法9. Ajax登陸使用Spring Security緩存跳轉(zhuǎn)到登陸前的鏈接10. 聊一聊數(shù)據(jù)請求中Ajax、Fetch及Axios的區(qū)別
網(wǎng)公網(wǎng)安備