Set Access-Control-Allow-Origin to achieve cross-domain access-JS Tutorial-php.cn

Set Access-Control-Allow-Origin to achieve cross-domain access

亚连

Release： 2018-05-22 17:28:37

Original

4344 people have browsed it

This article mainly introduces Ajax setting Access-Control-Allow-Origin to achieve cross-domain access. It is very good and has reference value. Friends in need can refer to it

ajax cross-domain access is an old There are many solutions to the problem. The more commonly used method 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 the jsonp method of jQuery 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 this, which is the same 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 directly use ajax to access, 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

// 指定允许其他域名访问 
header(&#39;Access-Control-Allow-Origin:*&#39;); 
// 响应类型 
header(&#39;Access-Control-Allow-Methods:POST&#39;); 
// 响应头设置 
header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;);

Copy after login

to the requested Response header to 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" content="text/html;charset=utf-8"> 
 <title> 跨域测试 </title> 
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 </head> 
 <body> 
 <p id="show"></p> 
 <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> 
 </body> 
</html>

Copy after login

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

<?php 
$ret = array( 
 &#39;name&#39; => isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;, 
 &#39;gender&#39; => isset($_POST[&#39;gender&#39;])? $_POST[&#39;gender&#39;] : &#39;&#39; 
); 
header(&#39;content-type:application:json;charset=utf8&#39;); 
header(&#39;Access-Control-Allow-Origin:*&#39;); 
header(&#39;Access-Control-Allow-Methods:POST&#39;); 
header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;); 
echo json_encode($ret); 
?>

Copy after login

Access-Control-Allow-Origin:* means allowing cross-domain access from any domain name

If you needSpecify a domain name to allow it For 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 you needSet multiple domain namesto allow access, you need to use php to process it

For example Allow www.client.com and www.client2.com to have cross-domain access to

server.php and change it to

<?php 
$ret = array( 
 &#39;name&#39; => isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;, 
 &#39;gender&#39; => isset($_POST[&#39;gender&#39;])? $_POST[&#39;gender&#39;] : &#39;&#39; 
); 
header(&#39;content-type:application:json;charset=utf8&#39;); 
$origin = isset($_SERVER[&#39;HTTP_ORIGIN&#39;])? $_SERVER[&#39;HTTP_ORIGIN&#39;] : &#39;&#39;; 
$allow_origin = array( 
 &#39;http://www.client.com&#39;, 
 &#39;http://www.client2.com&#39; 
); 
if(in_array($origin, $allow_origin)){ 
 header(&#39;Access-Control-Allow-Origin:&#39;.$origin); 
 header(&#39;Access-Control-Allow-Methods:POST&#39;); 
 header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;); 
} 
echo json_encode($ret); 
?>

Copy after login

. The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Ajax implements dynamic loading of data

Solution to spring mvc returning json data toajaxerror reporting parseerror problem

Various postures of front-endajax to interact with the back-end (graphic tutorial)

The above is the detailed content of Set Access-Control-Allow-Origin to achieve cross-domain access. For more information, please follow other related articles on the PHP Chinese website!