ajax はクロスドメイン アクセスを実現するために Access-Control-Allow-Origin を設定します
- WBOYオリジナル
- 2016-08-08 09:23:10821ブラウズ
ajax のクロスドメイン アクセスは古い問題であり、多くの解決策があります。最も一般的に使用されるのは JSONP メソッドであり、このメソッドは GET メソッドのみをサポートします。 POST メソッドほど安全ではありません。
jqueryのjsonpメソッドを使用してタイプをPOSTにしても、自動的にGETに変更されます。注:
これにより、リモート ドメイン リクエストの POST が GET に変わります。
Access-Control-Allow-Originを設定することでクロスドメインアクセスを実現するのは比較的簡単です。
Origin 'http://www.client.したがって、com' へのアクセスは許可されません .
*');
POST');
x-requested-with,content-type');
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" c/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.server.com/server.php",{name:"fdipzone",gender:"male"})
.done(function(data){
document.getElementById("show").innerHTML = data.name + ' ' + data.gender;
});
</script>
</body>
</html>
server.php パス: http://www .server.com/server.php
<?php
$ret = array(
'name' => isset($_POST['name'])? $_POST['name'] : '',
'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:
' ; server.php は <?php
$ret = array(
'name' => isset($_POST['name'])? $_POST['name'] : '',
'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.client.com',
'http://www.client2.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);
?>
ソースコードのダウンロードアドレス: クリックして表示
以上、クロスドメインアクセスを実現するためのajaxのAccess-Control-Allow-Originの設定方法を内容も含めて紹介しましたので、PHPチュートリアルに興味のある友人の参考になれば幸いです。