web跨域問題解決方案


在前端開發及調試過程中總能遇到瀏覽器報如下錯誤:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該錯誤由瀏覽器的同源策略(同ip,同端口,同協議視為同一個域,一個域內的腳本僅僅具有本域內的權限,可以理解為本域腳本只能讀寫本域內的資源,而無法訪問其它域的資源。這種安全限制稱為同源策略。 )所引起的。

解決方案

1.CORS(Cross-Origin Resource Sharing)是W3C在05年提出的跨域資源請求機制,它要求當前域(常規為存放資源的服務器)在響應報頭添加Access-Control-Allow-Origin標簽,從而允許指定域的站點訪問當前域上的資源。

不過CORS默認只支持GET/POST這兩種http請求類型,如果要開啟PUT/DELETE之類的方式,需要在服務端在添加一個"Access-Control-Allow-Methods"報頭標簽

2.JSONP

JSONP(JSON with Padding)是JSON的一種“使用模式”,主要是利用script標簽不受同源策略限制的特性,向跨域的服務器請求並返回一段JSON數據。

客戶端

---------------------------------------------------------------

<!DOCTYPE html>
  <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>JSONP</title>
    <script src="jq.js"></script>
    </head>
  <body>
  <div></div>
  <script>
    $.ajax({
      url:'http://127.0.0.1:1234/',
      dataType:"jsonp", //告知jQ我們走的JSONP形式
      jsonpCallback:"abc", //callback名
      success:function(data){
        console.log(data)
        }
      });
  </script>
  </body>
  </html>

-------------------------------------------------------------------------------

服務端

------------------------------------------------------------------------------

var http = require('http');
var urllib = require('url');

var data = {'name': 'vajoy', 'addr': 'shenzhen'};

http.createServer(function(req, res){
res.writeHead(200, { 'Content-type': 'text/plain'});
var params = urllib.parse(req.url, true);
//console.log(params);
if (params.query && params.query.callback) {
//console.log(params.query.callback);
var str = params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp
res.end(str);
} else {
res.end(JSON.stringify(data));//普通的json
}
}).listen(1234)

--------------------------------------------------------------------------------

不過JSONP始終是無狀態連接,不能獲悉連接狀態和錯誤事件,而且只能走GET的形式。

 

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 參考博文


免責聲明!

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



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