您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)Ajax跨域問(wèn)題如何解決,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
跨域
跨域有三個(gè)條件,滿足任何一個(gè)條件就是跨域
1:服務(wù)器端口不一致
2:協(xié)議不一致
3:域名不一致
解決方案:
1.jsonp
在遠(yuǎn)程服務(wù)器上設(shè)法動(dòng)態(tài)的把數(shù)據(jù)裝進(jìn)js格式的文本代碼段中,供客戶端調(diào)用和進(jìn)一步處理;在前臺(tái)通過(guò)動(dòng)態(tài)添加script標(biāo)簽及src屬性,表面看上去與ajax極為相似,但是,這和ajax并沒(méi)有任何關(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); } //動(dòng)態(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)用的形式 } });
運(yùn)行結(jié)果:
總結(jié)一下:
jsonp的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端, 然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)包裹住JSON數(shù)據(jù), 這樣客戶端就可以隨意定制自己的函數(shù)來(lái)自動(dòng)處理返回?cái)?shù)據(jù)了。
發(fā)現(xiàn)凡是擁有"src"這個(gè)屬性的標(biāo)簽都擁有跨域的能力,比如script、img、iframe; src 的能力就是把遠(yuǎn)程的數(shù)據(jù)資源加載到本地(圖片、JS代碼等);
2.cors
cors跨域的核心點(diǎn)是在服務(wù)端代碼中設(shè)置一個(gè)響應(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解決跨域很簡(jiǎn)單,只需要在服務(wù)器添加響應(yīng)頭 “ Access-Control-Allow-Origin :* ” 就可以了,
其實(shí)不然,因?yàn)樵贑ORS中,所有的跨域請(qǐng)求被分為了兩種類型,一種是簡(jiǎn)單請(qǐng)求,一種是復(fù)雜請(qǐng)求 (嚴(yán)格來(lái)說(shuō)應(yīng)該叫‘需預(yù)檢請(qǐng)求');簡(jiǎn)單請(qǐng)求與普通的ajax請(qǐng)求無(wú)異;但復(fù)雜請(qǐng)求,必須在正式發(fā)送請(qǐng)求前先發(fā)送一個(gè)OPTIONS方法的請(qǐng)求已得到服務(wù)器的同意,若沒(méi)有得到服務(wù)器的同意,瀏覽器不會(huì)發(fā)送正式請(qǐng)求;
滿足以下所有條件,被視為簡(jiǎn)單類型的請(qǐng)求:
1:請(qǐng)求方法必須是 GET、HEAD、POST中的一種,其他方法不行;
2:請(qǐng)求頭類型只能是 Accept、Accept-Language、Content-Language、Content-Type,添加其他額外請(qǐng)求頭不行;
3:請(qǐng)求頭 Content-Type 如果有,值只能是 text/plain、multipart/form-data、application/x-www-form-urlencoded 中的一種,其他值不行;
4:請(qǐng)求中的任意 XMLHttpRequestUpload 對(duì)象均沒(méi)有注冊(cè)任何事件監(jiān)聽(tīng)器;
5:請(qǐng)求中沒(méi)有使用 ReadableStream 對(duì)象。(以上摘自西嶺老濕微信公眾號(hào))
總結(jié)一下:
如果請(qǐng)求方式為get和post簡(jiǎn)單請(qǐng)求,則只需要設(shè)置響應(yīng)頭:res.setHeader('Access-Control-Allow-Origin','*');來(lái)允許某一個(gè)域 或者 所有域進(jìn)行數(shù)據(jù)共享;
若是其他方式的請(qǐng)求,會(huì)在發(fā)送真正的請(qǐng)求之前發(fā)送一個(gè)options請(qǐng)求,通過(guò)options請(qǐng)求里設(shè)置:res.setHeader('Access-Control-Allow-Methods', 'DELETE'),
告知服務(wù)器正式請(qǐng)求會(huì)使用哪一種 HTTP 請(qǐng)求方法。
上述就是小編為大家分享的Ajax跨域問(wèn)題如何解決了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。