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

Home

Web Front-end

JS Tutorial

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

亚连

May 22, 2018 pm 05:28 PM

accomplishaccess

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;);

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>

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); 
?>

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); 
?>

. 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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

如何在Java中访问JsonNode的JSON字段、数组和嵌套对象？Aug 30, 2023 pm 11:05 PM

一个JsonNode是Jackson的JSON树模型，它可以将JSON读取为JsonNode实例，并将JsonNode写入JSON。通过创建ObjectMapper实例并调用readValue()方法，我们可以使用Jackson将JSON读取为JsonNode。我们可以使用JsonNode类的get()方法访问字段、数组或嵌套对象。我们可以使用asText()方法返回有效的字符串表示，并使用JsonNode类的asInt()方法将节点的值转换为Javaint。在下面的示例中，我们可以访问Json

iOS 17：如何控制哪些应用程序可以访问您的照片Sep 13, 2023 pm 09:09 PM

在iOS17中，Apple可以更好地控制应用程序可以看到的照片内容。继续阅读，了解如何按应用管理应用访问权限。在iOS中，Apple的应用内照片选取器可让您与应用共享特定照片，而照片图库的其余部分则保持私密。应用必须请求访问您的整个照片图库，您可以选择授予应用以下访问权限：受限访问–应用程序只能看到您可以选择的图像，您可以随时在应用程序中或通过转到“设置”>“隐私和安全”>“照片”来查看所选图像。完全访问权限–App可以查看照片

使用Python访问各种音频和视频文件的元数据Sep 05, 2023 am 11:41 AM

我们可以使用Mutagen和Python中的eyeD3模块访问音频文件的元数据。对于视频元数据，我们可以使用电影和Python中的OpenCV库。元数据是提供有关其他数据（例如音频和视频数据）的信息的数据。音频和视频文件的元数据包括文件格式、文件分辨率、文件大小、持续时间、比特率等。通过访问这些元数据，我们可以更有效地管理媒体并分析元数据以获得一些有用的信息。在本文中，我们将了解Python提供的一些用于访问音频和视频文件元数据的库或模块。访问音频元数据一些用于访问音频文件元数据的库是-使用诱变

解决Tomcat部署war包后无法访问的问题的方法Jan 13, 2024 pm 12:07 PM

如何解决Tomcat部署war包后无法成功访问的困扰，需要具体代码示例Tomcat作为一个广泛使用的JavaWeb服务器，允许开发人员将自己开发的Web应用打包为war文件进行部署。然而，有时候我们可能会遇到部署war包后无法成功访问的问题，这可能是由于配置不正确或其他原因引起的。在本文中，我们将提供一些解决这个困扰的具体代码示例。一、检查Tomcat服务

如何解决PHP开发中的外部资源访问和调用Oct 08, 2023 am 11:01 AM

如何解决PHP开发中的外部资源访问和调用，需要具体代码示例在PHP开发中，我们经常会遇到需要访问和调用外部资源的情况，比如API接口、第三方库或者其他服务器资源。在处理这些外部资源时，我们需要考虑如何进行安全的访问和调用，同时保证性能和可靠性。本文将介绍几种常见的解决方案，并提供相应的代码示例。一、使用curl库进行外部资源调用curl是一个非常强大的开源库

win10家庭版共享文件夹无法访问怎么办Jan 11, 2024 pm 07:36 PM

在家庭或企业网络环境下，共享文件夹确实是一项极其实用的功能，它能让您轻松地将文件夹分享给其他用户，从而便于文件的传输与分享。win10家庭版共享文件夹无法访问解决方法：解决方案一：检查网络连接和用户权限在尝试使用Win10共享文件夹时，我们首先需要确认网络连接及用户权限是否正常。若网络连接存在故障或用户未获得访问共享文件夹的权限，便可能导致无法访问的现象。1、首先请确保网络连接顺畅，以便计算机与共享文件夹所在的计算机在同一局域网中，能够正常进行通信。2、其次检查用户权限，确认当前用户对于共享文件

win7修改文件提示更改权限拒绝访问如何解决Jul 04, 2023 pm 07:01 PM

　　win7修改文件提示更改权限拒绝访问如何解决？一些系统文件在进行修改的时候，常常会提示我们没有权限去进行操作。我们可以去进行文件夹权限的功能关闭，或者获取管理员权限。需要修改此类文件的用户，一起来看看接下来具体的教程分享吧。win7修改文件提示更改权限拒绝访问解决办法　　1、首先选中对应文件夹，点击上方工具，选中文件夹选项。　　2、进入查看选项卡。　　3、取消勾选使用简单文件共享然后确定。　　4、然后右键选择对应文件夹，点击属性。　　5、进入安全选项卡。　　6、选择图示位置，点击高级。　　7

只允许在HTML5中访问相机设备Sep 22, 2023 pm 11:09 PM

iOS中无法唯一访问相机设备。官方规范建议如下-建议该规范的用户代理实现在开始通过麦克风或摄像头捕获内容之前征求用户同意。这可能是满足与用户数据隐私相关的监管、法律和最佳实践要求所必需的。此外，建议用户代理实现在输入设备启用时向用户提供指示，并使用户可以终止此类捕获。同样，用户代理建议提供用户控制，例如允许用户-如果存在多个设备，则选择要使用的确切媒体捕获设备相同。在视频捕获模式下禁用声音捕获。

See all articles