Ajax跨域問(wèn)題及解決方案（jsonp，cors）

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-11|欄目：AJAX相關(guān)|點(diǎn)擊：次

跨域

跨域有三個(gè)條件，滿(mǎn)足任何一個(gè)條件就是跨域

1：服務(wù)器端口不一致
2：協(xié)議不一致
3：域名不一致

解決方案：

1.jsonp

　　在遠(yuǎn)程服務(wù)器上設(shè)法動(dòng)態(tài)的把數(shù)據(jù)裝進(jìn)js格式的文本代碼段中，供客戶(hù)端調(diào)用和進(jìn)一步處理；在前臺(tái)通過(guò)動(dòng)態(tài)添加script標(biāo)簽及src屬性，表面看上去與ajax極為相似，但是，這和ajax并沒(méi)有任何關(guān)系；為了便于使用及交流，逐漸形成了一中非正式傳輸協(xié)議，人們把它稱(chēng)作 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>
  //提前寫(xiě)好函數(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)就是允許用戶(hù)傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)包裹住JSON數(shù)據(jù)，這樣客戶(hù)端就可以隨意定制自己的函數(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)求被分為了兩種類(lèi)型，一種是簡(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)求；

滿(mǎn)足以下所有條件，被視為簡(jiǎn)單類(lèi)型的請(qǐng)求：

1：請(qǐng)求方法必須是 GET、HEAD、POST中的一種，其他方法不行；

2：請(qǐng)求頭類(lèi)型只能是 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)求方法。

總結(jié)

以上所述是小編給大家介紹的Ajax跨域問(wèn)題及解決方案（jsonp，cors）,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

上一篇：ajax實(shí)現(xiàn)省市三級(jí)聯(lián)動(dòng)效果

本文標(biāo)題：Ajax跨域問(wèn)題及解決方案（jsonp，cors）

本文地址：http://www.jygsgssxh.com/a1/AJAXxiangguan/11282.html

更多AJAX相關(guān)

雷火电竞-中国电竞赛事及体育赛事平台

AJAX相關(guān)

Ajax跨域問(wèn)題及解決方案（jsonp，cors）

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀

雷火电竞-中国电竞赛事及体育赛事平台

AJAX相關(guān)

Ajax跨域問(wèn)題及解決方案（jsonp，cors）

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀

Ajax跨域問(wèn)題及解決方案（jsonp，cors）