ajax跨域問題解決方案(jsonp,cors)


跨域

跨域有三個條件,滿足任何一個條件就是跨域
 1:服務器端口不一致
 2:協議不一致
 3:域名不一致

解決方案:

1.jsonp

  在遠程服務器上設法動態的把數據裝進js格式的文本代碼段中,供客戶端調用和進一步處理;在前台通過動態添加script標簽及src屬性,表面看上去與ajax極為相似,但是,這和ajax並沒有任何關系;為了便於使用及交流,逐漸形成了一中非正式傳輸協議,人們把它稱作 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 >
//提前寫好函數,調用函數需要傳參
function callback( data){
alert( data);
}
//動態添加script標簽及src屬性
$( '#btn'). on( 'click', function(){
var sc = document. createElement( 'script');
sc. src = 'http://soul:8888/kuayu?cb=callback';
$( 'head'). append( sc);
})
< / script >   

js:

 

 1 var http = require('http');
 2 var url = require('url');
 3 var server = http.createServer();
 4 server.listen('8888',function(){
 5     console.log('8888');
 6 });
 7 server.on('request',function(req,res){
 8     var urls = url.parse(req.url,true);
 9     if(urls.pathname == '/kuayu'){
10         res.end('callback("jsonp")');//返回的數據需是前端定義的函數調用的形式
11     }
12 });

 運行結果:

 

 

 總結一下:

  jsonp的一個要點就是允許用戶傳遞一個callback參數給服務端, 然后服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據, 這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

  發現凡是擁有"src"這個屬性的標簽都擁有跨域的能力,比如script、img、iframe; src 的能力就是把遠程的數據資源加載到本地(圖片、JS代碼等);

 

2.cors

cors跨域的核心點是在服務端代碼中設置一個響應頭即可

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代碼:

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){

    // 允許所有請求域
    // res.setHeader('Access-Control-Allow-Origin','*');
    // 只允許具體的一個域進行數據共享
    // res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:8000');

   var urls = url.parse(req.url,true);
    res.setHeader('Access-Control-Allow-Origin','*');
    if(req.method == 'POST' || req.method == 'GET'){
        if(urls.pathname == '/kuayu'){
            res.end('hello,world');
        }
    // 客戶端發送預先檢查請求,響應會客戶端, }
else if(req.method == 'OPTIONS'){ res.setHeader('Access-Control-Allow-Methods', 'DELETE');//設置所允許的真是請求(delete,put等) res.end('');
  // 客戶端發送真實請求,響應數據 }
else if(req.method == 'DELETE'){ res.end('Bye'); } });

 

效果:

 

 

 

   很多人也認為使用CORS解決跨域很簡單,只需要在服務器添加響應頭 “ Access-Control-Allow-Origin :* ” 就可以了,

其實不然,因為在CORS中,所有的跨域請求被分為了兩種類型,一種是簡單請求,一種是復雜請求 (嚴格來說應該叫‘需預檢請求’);簡單請求與普通的ajax請求無異;但復雜請求,必須在正式發送請求前先發送一個OPTIONS方法的請求已得到服務器的同意,若沒有得到服務器的同意,瀏覽器不會發送正式請求;

滿足以下所有條件,被視為簡單類型的請求:

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  對象均沒有注冊任何事件監聽器;

5:請求中沒有使用 ReadableStream 對象。(以上摘自西嶺老濕微信公眾號)

 

總結一下:

如果請求方式為get和post簡單請求,則只需要設置響應頭:res.setHeader('Access-Control-Allow-Origin','*');來允許某一個域 或者 所有域進行數據共享;

若是其他方式的請求,會在發送真正的請求之前發送一個options請求,通過options請求里設置:res.setHeader('Access-Control-Allow-Methods', 'DELETE'),

告知服務器正式請求會使用哪一種 HTTP 請求方法。

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM