Ajax sets Access-Control-Allow-Origin to implement cross-Origin Access and accesscontrolallow

Ajax sets Access-Control-Allow-Origin to implement cross-Origin Access and accesscontrolallow

Cross-origin access through ajax is an old problem. There are many solutions, and the JSONP method is commonly used. The JSONP method is an unofficial method and only supports the GET method, it is not as secure as POST.

Even if jQuery's jsonp method is used and type is set to POST, it 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 will turn POSTs into GETs for remote-domain requests.

If the POST method is used for cross-origin, you can create a hidden iframe. This is the same as uploading an image through ajax, but it is troublesome.

Therefore, it is easy to implement cross-Origin Access by setting Access-Control-Allow-Origin.

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

If you directly use ajax for access, the following error occurs:

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 in the requested Response header

// Specify to Allow other domain names to Access the 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 cross-origin access to ajax POST.

The Code is as follows:

Client.html path: http://www.client.com/client.html

<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> 
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: * indicates that cross-Origin Access is allowed for any domain name.
If you need to specify a domain name to Allow cross-Origin Access, you only need to change Access-Control-Allow-Origin: * to Access-Control-Allow-Origin: allowed domain name.
Example: 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 to handle it here.
For example, cross-origin access is allowed between www.client.com and www.client2.com.
Modify 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); ?> 
Source code:Http://xiazai.jb51.net/201702/yuanma/demo (jb51.net)
The above section describes how to set Access-Control-Allow-Origin for cross-Origin Access through Ajax. I hope this will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!