ajax 跨域访问 :Access-Control-Allow-Origin
一说到ajax跨域。首先想到的就是jsonp 。
JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全。
即使使用jQuery的jsonp方法,type设为POST,也会自动变为GET。
官方问题说明:
“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.
如果跨域使用POST方式,可以使用创建一个隐藏的iframe来实现,与ajax上传图片原理一样,但这样会比较麻烦。
因此,通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。
例如:客户端域名:www.aaa.com 服务端域名:www.bbb.com
如果直接使用ajax访问,会有以下错误
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.
在被请求的Response header中加入
<?php // 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type'); ?>
就可以实现ajax POST跨域访问了。
代码如下:
test.html 路径:http://www.aaa.com/test.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title> 跨域测试 </title>
<script src="http://code.jquery.com/jquery.js"></script>
</head> <body>
<div id="show"></div>
<script type="text/javascript">
$.post("http://www.bbb.com/test.php",{name:"111",number:"222"})
.done(function(data){
console.log(data);
});
</script>
</body>
</html>
test.php 路径:http://www.bbb.com/test.php
<?php
$data= array(
'name' => isset($_POST['name'])? $_POST['name'] : '',
'number' => isset($_POST['number'])? $_POST['number'] : ''
); 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($data);
?>
Access-Control-Allow-Origin:* 表示允许任何域名跨域访问
如果需要指定某域名才允许跨域访问,只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名
例如:header('Access-Control-Allow-Origin:http://www.aaa.com');
如果需要设置多个域名允许访问,这里需要用php处理一下
例如允许 www.aaa1.com 与 www.aaa2.com 可以跨域访问
<?php
$ret = array(
'name' => isset($_POST['name'])? $_POST['name'] : '',
'number' => isset($_POST['number'])? $_POST['number'] : ''
); header('content-type:application:json;charset=utf8'); $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; $allow_origin = array(
'http://www.aaa1.com',
'http://www.aaa2.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);
?>
ajax 跨域访问 :Access-Control-Allow-Origin的更多相关文章
- Hbuilder编辑App时,ajax跨域访问失败问题
今天试着用Hbuilder写app的前段显示页面,在第一步时就被打住了,ajax异步调用服务器的登录接口时,报错, 显示这样的错误 XMLHttpRequest cannot loadhttp://w ...
- Ajax跨域访问解决办法
方法1. jsonp实现ajax跨域访问示例 jsp代码: <body> <input type="button" onclick="testJsonp ...
- 浅析JSONP-解决Ajax跨域访问问题
浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...
- ajax跨域访问的解决方案
今天的工作中要访问摄像机内部的一个web站点,这就涉及到jquery的ajax跨域访问的问题.我使用的是jquery1.7的版本,下面总结如下: 问题一:一开始用IE调试,总是返回No Transpo ...
- Web Api 2(Cors)Ajax跨域访问
支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示 随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...
- ajax 跨域访问的解决方案
ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...
- 关于JQuery Ajax 跨域 访问.net WebService
关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...
- JS Ajax跨域访问
js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...
- ajax跨域访问http服务--jsonp
在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...
随机推荐
- SSL/TLS原理详解2
引用原文地址:https://segmentfault.com/a/1190000004985253#articleHeader6 在进行 HTTP 通信时,信息可能会监听.服务器或客户端身份伪装等安 ...
- java资料——顺序存储结构和链式存储结构(转)
顺序存储结构 主要优点 节省存储空间,随机存取表中元素 缺 点 插入和删除操作需要移动元素 在计算机中用一组地址连续的存储单元依次存储线性表的各个数据元素,称作线性表的顺序存储结构. 顺序存储结 ...
- 第一次使用bootstrap3做的响应式网站
第一次使用bootstrap3,发现对移动支持得不错,可以很快的开发出一个支持移动和PC端的网站 作为一个后台程序员觉得得界面做得还可以, 按以前是只能自己看看了 时间线来自国外网站,使用到的css如 ...
- FastDFS 安装步骤
nginx01 121nginx02 122 tracker01 131tracker02 132 storage01 141storage0 ...
- 每个Web开发者都应该知道的关于URL编码的知识
本文首先阐述了人们关于统一资源定位符(URL)编码的普遍的误读,其后通过阐明HTTP场景下的URL encoding 来引出我们经常遇到的问题及其解决方案.本文并不特定于某类编程语言,我们在Java环 ...
- 【转】如何搭建IPv6测试你的APP
IPv6的简介 IPv4 和 IPv6的区别就是 IP 地址前者是 .(dot)分割,后者是以 :(冒号)分割的(更多详细信息自行搜索). PS:在使用 IPv6 的热点时候,记得手机开 飞行模式 哦 ...
- linux pmap命令
pmap提供了进程的内存映射,pmap命令用于显示一个或多个进程的内存状态.其报告进程的地址空间和内存状态信息.Pmap实际上是一个Sun OS上的命令,linux仅支持其有限的功能.但是它还是对查看 ...
- ADC相关参数之---INL和DNL
笔者最近在做的一个项目中,用到一片16位的高分辨率的芯片,借此再学习一下由于ADC和DAC的相关知识,以此巩固. 关于ADC的精度和分辨率将在另外一篇博客讨论,分辨率不等于精度. 一块精度0.2%(或 ...
- Struts2中带参数的结果集
2.首先,新建一个struts2项目,项目名为ResultParam,打开index.jsp页面,修改编码格式为utf-8,添加一个超链接,用于向结果集传参数,完整代码如下: 相应的struts.xm ...
- native生成策略:由Hibernate根据所使用的数据库支持能力从identity、sequence或者等生成策略中选择一种
increment生成策略:当Hibernate准备在数据库表中插入一条新记录时,首先从数据库表中获取当前主键字段的最大值,然后在最大值基础上加1,作为当前持久化对象的标识符属性值.这种策略即incr ...