HTML5中Access-Control-Allow-Origin解决跨域问题_html access-control-allow-origin-程序员宅基地

技术标签: jQuery  html5  跨域  JavaScript  ajax  AJAX  

A.abc.com 发起一个到 abc.com/B 的ajax请求,也会有跨域的问题。之所以会有跨域问题,实则是因为www.abc.com其实同A.abc.com一样,也是一个二级域名,而非一级域名(一级域名是http://abc.com)。

URL 说明 是否允许通信
http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许
http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.jshttp://www.a.com/b.js 同一域名,不同端口 不允许
http://www.a.com/a.jshttps://www.a.com/b.js 同一域名,不同协议 不允许
http://www.a.com/a.jshttp://170.32.82.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.jshttp://script.a.com/b.js 同一域名,不同二级域名 不允许
http://www.a.com/a.jshttp://a.com/b.js 二级域名和一级域名 不允许(cookie这种情况下也不允许访问)
http://www.b.com/a.jshttp://www.a.com/b.js 不同域名 不允许

对于是否允许跨域,更详细的说明可以看下表:


有了对跨域的基本概念了解后,就可直接进入这篇文章的主题了。

赞助商链接
解决方法:

若在接收请求的服务端abc.com/B页面用的是php语言,则在页面中加入:

// 指定可信任的域名来接收响应信息,推荐
<?php  header('Access-Control-Allow-Origin:http://A.abc.com'); ?>
或加入

// 使用通配符 * ,表示当前服务端通话任何域名发起请求,不推荐
<?php header('Access-Control-Allow-Origin:*'); ?>
就这样在服务端简单加一句响应头responese headers声明,一个跨域请求就不会被浏览器的同源安全策略所阻止了!

用chrome调试工具Network ajax请求查看面板中可以看到,类似如下截图:cors

需要注意的是:

添加响应头responese headers时,允许跨域请求的域名带不带斜杠/还是有区别的,带斜杠/会报错:
XMLHttpRequest cannot load  abc.com/B. The 'Access-Control-Allow-Origin' header has a value 'http://A.abc.org/' that is not equal to the supplied origin. Origin 'http://A.abc.org' is therefore not allowed access.

header('Access-Control-Allow-Origin:*');是html5新增的一项标准功能,因此 IE10以下 版本的浏览器是不支持 的,因此,如果要求兼容IE9或更低版本的ie浏览器,会导致使用此种方式的跨域请求以及传递Cookie的计划夭折,最终还得回归JSONP(目前主流的处理方式是使用JSONP,易于实现,兼容性好,可查的资料也很多。)

跨域解决后,如果还要操作Cookie,还得继续补增响应头:

<?php  header('Access-Control-Allow-Credentials:true'); ?>
需要将 XMLHttpRequest 对象的 withCredentials 属性设置为 true,JQuery1.5.1+ 就开始提供了相应的字段,使用方式如下:

$.ajax({
url:"B.abc.com",
xhrFields:{
withCredentials:true
},
crossDomain:true
});
哦也~ 收到 Cookie 了。

设置 withCredentials 为 true 的请求中会包含 A.abc.com端的所有Cookie,这些Cookie仍然遵循同源策略,所以,你只能访问其中和 abc.com/B同根域的Cookie,而无法访问其他域的Cookie。

Access-Control-Allow-Origin实则是html5 Cross-Origin Resource Sharing实现的最重要的一点参数配置。
Cross-Origin Resource Sharing,跨域资源共享,简称 CORS,可以作为一种跨域请求以及响应的解决方案。


附:

禁用chrome本地安全策略,不用配服务器环境也能发起ajax请求:
chrome 桌面快捷键 右键属性 在快捷方式标签下的“目标”框中加入 --disable-web-security,重启浏览器即可

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hybaym/article/details/76119514

智能推荐

基于51单片机冰箱温度控制器设计_基于51单片机的智能冰箱控制系统设计-程序员宅基地

文章浏览阅读871次,点赞11次,收藏3次。*单片机设计介绍, 基于51单片机冰箱温度控制器设计。_基于51单片机的智能冰箱控制系统设计

ubuntu创建sftp和ftp服务器及相应的用户管理_ubuntu sftp服务器查看用户和密码-程序员宅基地

文章浏览阅读4.8k次。一、sftp服务器进入root模式(下面的操作默认都是在root用户下)#安装openssh-serverapt-get install -y openssh-server创建sftp的组和用户#创建sftp-users组groupadd sftp-users#创建sftp用户目录alicemkdir /home/alice#创建sftp用户alice,并且绑定其主目..._ubuntu sftp服务器查看用户和密码

关于在simulink中使用s-function后出现State derivatives returned by S-function during flag=1 call must be a rea_state derivatives returned by s-function 'pmsm' in-程序员宅基地

文章浏览阅读5.9k次,点赞9次,收藏16次。解决了在simulink中使用s-function遇到的报错:State derivatives returned by S-function 'demo' in 'test/S-Function' during flag=1 call must be a real vector of length 2 _state derivatives returned by s-function 'pmsm' in 'ipmsm/ipmsm/s-function1

Sublime Text 关闭自动更新 | Mac_mac sublime text 取消更新提示-程序员宅基地

文章浏览阅读3.1k次。1. 打开配置文件Mac 如下图2. 在文件内部添加这段文字,就可以了:"update_check":false _mac sublime text 取消更新提示

Linux系统下DNS配置指南_linux 服务器修改网络dns-程序员宅基地

文章浏览阅读548次,点赞10次,收藏6次。Linux系统下DNS配置指南_linux 服务器修改网络dns

Springboot/java/node/python/php基于springboot+vue手机售后管理系统【2024年毕设】-程序员宅基地

文章浏览阅读779次,点赞19次,收藏24次。springboot微信小程序的小疾病问诊服务系统的设计与实现。springboot基于spring的物业管理系统的设计与实现。springboot基于Java的高校学生请假系统。ssm基于Android的购物商场APP设计与实现。springboot基于微信小程序的智慧校园系统。ssm基于Android的英语词典的设计与开发。ssm基于SSM+Vue的学生实践管理平台开发。ssm基于android的企业员工考勤系统。ssm基于web的暗香小店系统的设计与实现。ssm基于Web的高等学校公费医疗管理系统。

随便推点

C#反序列化无法找到程序集_未能找到程序集“g:\c#%5cc#%20%e4%b8%8a%e4%bd%8d%e6%9c%ba%5-程序员宅基地

文章浏览阅读7.7k次。反序列化无法找到程序集提示找不到程序集. 原因是序列化时把序列化类的命名空间等信息保存了,但应用程序和类库的命名空间可能是不一样的,所以提示找不到程序集. 解决方法如下: 方法1.将dll加入强名称,注册到全局程序集缓存中 方法2.在反序列化使用的IFormatter 对象加入Binder 属性,使其获取要反序列化的对象所在的程序集_未能找到程序集“g:\c#%5cc#%20%e4%b8%8a%e4%bd%8d%e6%9c%ba%5c%e7%a9%ba%e5%8e%8

Jet-Lube EZY-Turn Kopr-Kote Deacon_dpezy-程序员宅基地

文章浏览阅读234次。Jet-Lube EZY-Turn Kopr-Kote Deacon Moly-Lith 12|34 21 (Oilfield) 21 (Water Well) 21 Arctic (Oilfield) 21 Arctic (Water Well) 550 Extreme 550 Extreme All Weather 713-670-5700 769 Lubricant 930 Whitmore Drive Alco-EP Alco-EP ECF Alco-EP-73 Plus AP-1 AP-1W _dpezy

mpi4py 中的单边通信相关操作_win.fence() win.free()-程序员宅基地

文章浏览阅读511次。本文从本人简书博客同步过来在上一篇中我们简要地介绍了 mpi4py 中的单边通信概念,下面我们将介绍单边通信的相关操作。创建/释放窗口对象注意:在使用单边通信操作之前,所有进程都须通过共同参与的创建窗口操作公开声明自己可供访问的内存空间。创建和释放窗口对象的方法(MPI.Win 类方法)接口如下:Create(type cls, memory, int disp_unit=..._win.fence() win.free()

MIT 6.824 Lab1 MapReduce实现思路_mitmapreduce实现csdn-程序员宅基地

文章浏览阅读551次,点赞23次,收藏7次。mit6.824的lab1,实现MapReduce_mitmapreduce实现csdn

使用Android studio创建一个简单项目_android studio简单项目-程序员宅基地

文章浏览阅读6.6k次,点赞10次,收藏82次。在刚开始学Android开发时,下载好了Android studio,但是不知道如何下手,现在就通过一个简单的小项目熟悉如何使用这个软件进行Android开发。前提:下载好Android studio并配置好相关环境。首先介绍一下Android开发过程中需要修改的三类文件:位于java包下的各类activity文件:实现了用户与软件的交互,主要为java代码实现。位于res包下的.xml文件:在layout包里的为布局文件,即Android界面显示的视图,而drawable里则放置了某个控件的_android studio简单项目

Bootstrap 弹出框-程序员宅基地

文章浏览阅读3.5k次。一、Bootstrap 弹出框弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。1.1 基本弹出框通过向元素添加 data-toggle=“popover” 来来创建弹出框。title 属性的内容为弹出框的标题,data-content 属性..._bootstrap 弹出框

推荐文章

热门文章

相关标签