Home > Article > Backend Development > ajax sets Access-Control-Allow-Origin to achieve cross-domain access
ajax sets Access-Control-Allow-Origin to achieve cross-domain access
- WBOYOriginal
- 2016-08-08 09:23:10821browse
ajax cross-domain access is an old problem. There are many solutions. The more commonly used one is the JSONP method. The JSONP method is an unofficial method, and this method only supports the GET method, which is not as safe as the POST method.
Even if you use jquery’s jsonp method and set the type to POST, it will automatically change to GET.
Official problem description:
"script": Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.Note:
This will turn POSTs into GETs for remote-domain requests.
If you use POST across domains, you can create a hidden iframe to achieve the same principle as ajax uploading images, but this will be more troublesome.
Therefore, it is relatively simple to achieve cross-domain access by setting Access-Control-Allow-Origin.
For example: the client's domain name is www.client.com, and the requested domain name is www.server.com
If you use ajax to access directly, there will be the following error
XMLHttpRequest cannot load http://www.server.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://www.client.com' is therefore not allowed access .
Add
// to the requested Response header to specify that other domain names are allowed to access
header('Access-Control-Allow-Origin:*');
// Response type
header('Access-Control-Allow-Methods:POST');
// Response header setting
header( 'Access- Control-Allow-Headers:x-requested-with,content-type');
can achieve ajax POST cross-domain access.
The code is as follows:
client.html Path: http://www.client.com/client.html
<!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 Path: 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:* means that any domain name is allowed for cross-domain access
If you need to specify a domain name to allow cross-domain access, just change Access-Control- Allow-Origin:*Changed to Access-Control-Allow-Origin:Allowed domain names
For example: header('Access-Control-Allow-Origin:http://www.client.com' ;
server.php is modified to
<?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);
?>
Source code download address: click to viewThe above introduces how to set Access-Control-Allow-Origin for ajax to achieve cross-domain access, including the content. I hope it will be helpful to friends who are interested in PHP tutorials.