ajax跨域(No 'Access-Control-Allow-Origin' header is present on the requested resource)
问题
在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题。另一个域名必须在response中添加 Access-Control-Allow-Origin
的header,才能让前者成功拿到数据。
这句话对吗?如果对,那么流程是什么样的?
跨域
怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域。
当跨域访问时,浏览器会发请求吗
这是真正困扰我们的问题,因为我们不清楚浏览器会怎么做。它会不会检查到你要请求的地址不是同一个域的,直接就禁止了呢? 浏览器确实发出了请求
我做了一个实验,
前端(html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax跨域</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url:'http://span.home.com/test.php',
type:'POST',
data:'name=hello',
dataType:'json',
success:function(data){
alert(data.name);
}
});
});
});
</script>
</head>
<body> <div id="div1"><h2>使用 jQuery AJAX 获取内容</h2></div>
<button>test</button> </body>
</html>
后台(php)
<?php
header('content-type:application:json;charset=utf8'); $name = isset($_REQUEST['name']) ? $_REQUEST['name'] : 'will';
$arr = array('id'=>1, 'name'=>$name); echo json_encode($arr);
控制台上会打出:
XMLHttpRequest cannot load http://span.home.com/test.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://span.front.com' is therefore not allowed access.
Access-Control-Allow-Origin
现在该 Access-Control-Allow-Origin
出场了。只有当目标页面的response中,包含了 Access-Control-Allow-Origin
这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。如:
Access-Control-Allow-Origin:
http://span.front.com
如果它的值设为 *
,则表示谁都可以用:
Access-Control-Allow-Origin: *
后台代码作了部分修改之后就可以正常拿到页面的数据:
<?php
header('content-type:application:json;charset=utf8'); $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
$allow_domain = array('http://span.front.com'); if (in_array($origin, $allow_domain))
{
//Access-Control-Allow-Origin:* 表示允许任何域名跨域访问
header('Access-Control-Allow-Origin:'.$origin);
header('Access-Control-Allow-Methods:GET,POST,OPTIONS');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
}
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : 'will';
$arr = array('id'=>1, 'name'=>$name); echo json_encode($arr);
注:前端域名 http://span.front.com, 后台域名 http://span.home.com
ajax跨域(No 'Access-Control-Allow-Origin' header is present on the requested resource)的更多相关文章
- Webapi 跨域 解决解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource 问题
首先是web端(http://localhost:53784) 请求 api(http://localhost:81/api/)时出现错误信息: 查看控制台会发现错误:XMLHttpRequest c ...
- SpringBoot添加Cors跨域配置,解决No 'Access-Control-Allow-Origin' header is present on the requested resource
目录 什么是CORS SpringBoot 全局配置CORS 拦截器处理预检请求 什么是CORS 跨域(CORS)请求:同源策略/SOP(Same origin policy)是一种约定,由Netsc ...
- As.net WebAPI CORS, 开启跨源访问,解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource
默认情况下ajax请求是有同源策略,限制了不同域请求的响应. 例子:http://localhost:23160/HtmlPage.html 请求不同源API http://localhost:228 ...
- java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)
1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...
- 跨域问题解决----NO 'Access-Control-Allow-Origin' header is present on the requested resource.Origin'http://localhost:11000' is therfore not allowed access'
NO 'Access-Control-Allow-Origin' header is present on the requested resource.Origin'http://localhost ...
- .Net Core 处理跨域问题Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource
网页请求报错: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Or ...
- (转)AJax跨域:No 'Access-Control-Allow-Origin' header is present on the requested resource
在本地用ajax跨域访问请求时报错: No 'Access-Control-Allow-Origin' header is present on the requested resource. Ori ...
- js跨域访问,No 'Access-Control-Allow-Origin' header is present on the requested resource
js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...
- WCF REST开启Cors 解决 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 405.
现象: 编写了REST接口: [ServiceContract] public interface IService1 { [OperationContract] [WebInvoke(UriTemp ...
随机推荐
- 第 3 章 HTML5 网页中的文本和图像
文字和图像是网页中最主要.最常用的元素. 在互联网高速发展的今天,网站已经成为一个展示与宣传自我的通信工具(公司或个人可以通过网站介绍公司的服务与产品或介绍自己).这些都离不开网站中的网页,而网页的内 ...
- Python爬虫原理
前言 简单来说互联网是由一个个站点和网络设备组成的大网,我们通过浏览器访问站点,站点把HTML.JS.CSS代码返回给浏览器,这些代码经过浏览器解析.渲染,将丰富多彩的网页呈现我们眼前: 一.爬虫是什 ...
- ifcfg-eth配置详解(CentOS6)
1.基本配置形式 1.1 动态IP基本配置 DEVICE=eth0 TYPE=Ethernet ONBOOT=yes BOOTPROTO=dhcp DEVICE--网卡名,要与ifcfg-ethx中的 ...
- VMware进入BIOS
在虚拟机关机状态下,点击“虚拟机”--“电源”--“打开电源时进入固件”即自动启动进入bios
- cmp的值到底是0还是1还是-1的问题
返回值不局限于这三个数返回负数,表示第一个参数小于第二个参数返回整数,表示第一个参数大于第二个参数返回0,表示他们相等
- Mysql计算并保留两位小数
如:123456.789 转成 123456.79 自动,));
- javascript 多个onclick function 取对应值
方法1: 直接获取值 <button onclick="aa(1)">执行</button> <button onclick="aa(2)& ...
- laravel中的plicy授权方法:
1.用命令新建policy: php artisan make:policy PostPolicy 2.在app/Policies/PostPolicy.php中添加处理文件的权限的方法: //修改: ...
- Win10系列:VC++ Direct3D模板介绍3
(4)Render函数 默认定义在CubeRenderer.cpp源文件中的Render函数用于绘制立体图形,此函数的实现代码如下所示: void CubeRenderer::Render() { ...
- 尚学堂java 答案解析 第四章
本答案为本人个人编辑,仅供参考,如果读者发现,请私信本人或在下方评论,提醒本人修改 一.选择题 1.BD 解析:B:类必须有构造方法,若程序未写,这系统自动调用系统构造方法. D:super()会调用 ...