ajax跨域訪問是一個老生暢談的問題啦,網上解決方法很多,discuz用的p3p協議,有興趣的朋友可以了解下,比較常用的是JSONP方法,貌似目前這種方法只支持GET方式,不如POST方式安全。
即使使用jquery的jsonp方法,type設為POST,也會自動變為GET。還有一種方式:如果跨域使用POST方式,可以使用創建一個隱藏的iframe來實現,與ajax上傳圖片原理一樣,但這樣感覺會比較麻煩。
因此,通過設置Access-Control-Allow-Origin來實現跨域訪問比較簡單。
例如:客戶端的域名是www.xyz.com,而請求的域名是www.abc.com
如果直接使用ajax訪問,會有以下錯誤
XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://www.xyz.com' is therefore not allowed access.
解決辦法:
// 指定允許其他域名訪問 header('Access-Control-Allow-Origin:*'); // 響應類型 header('Access-Control-Allow-Methods:POST'); // 響應頭設置 header('Access-Control-Allow-Headers:x-requested-with,content-type');
這樣就可以實現ajax POST跨域訪問了
代碼如下:
a.html 路徑:http://www.xyz.com/a.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title> 周伯通跨域測試 </title> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> </head> <body> <div id="show"></div> <script type="text/javascript"> $.post("http://www.abc.com/server.php",{username:"周伯通",gender:"男"}) .done(function(data){ document.getElementById("show").innerHTML = data.username + ' ' + data.gender; }); </script> </body> </html>
server.php 路徑:http://www.abc.com/server.php
<?php //制作演示,可以用mysql_escape_string $ret = array( 'username' => isset($_POST['username'])? $_POST['username'] : '', 'gender' => isset($_POST['gender'])? $_POST['gender'] : '' ); header('content-type:application:json;charset=utf8'); header('Access-Control-Allow-Origin:*'); header('Access-Control-Allow-Methods:POST'); header('Access-Control-Allow-Headers:x-requested-with,content-type'); echo json_encode($ret); ?>
Access-Control-Allow-Origin:* 表示允許任何域名跨域訪問
如果需要指定某域名才允許跨域訪問,只需把Access-Control-Allow-Origin:*改為Access-Control-Allow-Origin:允許的域名
例如:header('Access-Control-Allow-Origin:http://www.xyz.com');
如果需要設置多個域名允許訪問,這里需要用php處理一下
例如允許 www.xyz.com 與 www.xyz2.com 可以跨域訪問
server.php 修改為
<?php
$ret = array( 'username' => isset($_POST['username'])? $_POST['username'] : '', 'gender' => isset($_POST['gender'])? $_POST['gender'] : '' ); header('content-type:application:json;charset=utf8'); $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; $allow_origin = array( 'http://www.xyz.com', 'http://www.xyz2.com' ); if(in_array($origin, $allow_origin)){ header('Access-Control-Allow-Origin:'.$origin); header('Access-Control-Allow-Methods:POST'); header('Access-Control-Allow-Headers:x-requested-with,content-type'); } echo json_encode($ret); ?>