ajax sets Access-Control-Allow-Origin to achieve cross-domain access

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

 
  <meta http-equiv="content-type" c>
  <title> 跨域测试 </title>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 

 
    <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 + &#39; &#39; + data.gender;
      });
    </script>
 

server.php Path: http://www.server. com/server.php

<?php $ret = array(
    &#39;name&#39; => 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(
    &#39;name&#39; => 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 view
The 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.