Ajax setting access control allow origin for cross domain access

Time:2020-1-27

Ajax cross domain access is an old problem, there are many solutions, jsonp method is more commonly used, jsonp method is an unofficial method, and this method only supports get mode, which is not as secure as post mode.

Even usejQueryThe jsonp method with type set to post will also automatically change to get.

Official questions:

“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 mode across domains, you can use to create a hidden iframe, which is the same as the principle of Ajax uploading pictures, but it will be more troublesome.

Therefore, by settingAccess-Control-Allow-OriginTo achieve cross domain access is relatively simple.

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

If you use ajax access directly, you will get the following errors

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

//Specify allow other domain name access 
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"> 
<html> 
 <head> 
 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
 < title > cross domain test < / Title > 
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 </head> 
 <body> 
 <div></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 to allow cross domain access of any domain name

if necessarySpecify a domain nameTo allow cross domain access, just change access control allow origin: * to access control allow origin:Allowed domain names

For example: header (‘Access control allow origin: http://www.client.com ‘);

if necessarySet up multiple domain namesAccess is allowed. You need to use PHP to handle this

For example, allow cross domain access to www.client.com and www.client2.com

Change server.php 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 download address:http://xiazai.jb51.net/201702/yuanma/demo(jb51.net)

The following is the supplement of other netizens:

Recently, when playing games with cocos2d JS,
Error in local cross domain access request with Ajax:

XMLHttpRequest cannot loadhttp://www.zjblogs.com/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

The solution is as follows:

1. If the requested URL is an ASPX page, you need to add code in the ASPX page: response.addheader (“access control allow origin”, “*”);

2. If the requested URL is a PHP page, you need to add code to the PHP page: header (“access control allow origin: *”);

3. If the requested URL is a static HTML page, you need to add the meta tag code to the page:

The * here means that all domain names are allowed to access. If the server can determine which domain names to access, it is better to replace the “*” in the above code with a specific domain name, so as to enhance security accordingly.

The above is the Ajax setting access control allow origin introduced by Xiaobian. I hope it can help you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!

Recommended Today

PHP realizes UnionPay business H5 payment

UnionPay business H5 payment interface document: document address 1: H5 payment interface address: 1: Alipay payment Test address: http://58.247.0.18:29015/v1/netpay/trade/h5-pay Official address: https://api-mop.chinaums.com/ 2: UnionPay payment Test address: http://58.247.0.18:29015/v1/netpay/uac/order Official address: https://api-mop.chinaums.com/ 2: Basic parameters required by the interface The interface uses get parameters. After the interface parameters are directly put into the interface address, the […]