Ajax settings Access-control-allow-origin for cross-domain access

Ajax cross-domain access is an old problem, a lot of solutions, more commonly used is the Jsonp method, the Jsonp method is an unofficial method, and this method only supports get mode, not as secure as post.

Even if you use the Jsonp method of jquery, type is set to post and is automatically changed to get.

Official Question 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 would turn POSTs into GETs a for remote-domain requests.

If you use post for cross-domain, you can use the Create a hidden iframe, like the Ajax upload image principle, but it will be more cumbersome.

Therefore, it is relatively easy to set up access-control-allow-origin for cross-domain access.

For example: The domain name of the client is www.client.com, and the requested domain name is www.server.com

If you use AJAX access directly, you will get 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.

Join in the requested response header

    // specify allow other domain names   to be accessed    Header ('access-control-allow-origin:*');       // response type      Header ('access-control-allow-methods:post');       // response header Settings      Header ('access-control-allow-headers:x-requested-with,content-type');  

You can implement 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"> "Content-type"Content="Text/html;charset=utf-8"> <title> cross-domain testing </title> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> "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> 
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 cross-domain access if you need to specify a domain name to allow cross-domain access, simply use Access-control-allow-origin:* To access-control-allow-Origin: Allowed domain names such as: Header ('access-control-allow-origin:http:// www.client.com'); If you need to set multiple domain names to allow access, you need to use PHP for example to allow www.client.com and www.client2.com Can cross-domain access server.php 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: Click to view
Reprint: http://blog.csdn.net/fdipzone/article/details/46390573
Ajax settings Access-control-allow-origin for cross-domain access