Ajax跨域問題及解決方案（jsonp，cors）

2024-09-01 08:31:16

字體：大中小

來源：轉載

供稿：網友

跨域

跨域有三個條件，滿足任何一個條件就是跨域

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：

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")');//返回的數據需是前端定義的函數調用的形式   } });

運行結果：

總結一下：

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

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

效果：