Access control allow origin 简单请求和复杂请求
原文地址:http://blog.csdn.net/wangjun5159/article/details/49096445
错误信息:
XMLHttpRequest cannot load http://web.image.myqcloud.com/photos/v2/10008653/bhpocket/0/?sign=4FcLKd5B8…p4SkFVUEJtZ1omZT0xNDQ0NzExMDE5JnQ9MTQ0NDcwNzQxOSZyPTEzMDMyMDgzOTAmdT0wJmY9.No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
分析:
Access control allow origin直译过来就是"访问控制允许同源",这是由于ajax跨域访问引起的。所谓跨域就是,在a.com域下,访问b.com域下的资源;出于安全的考虑,浏览器允许跨域写,而不允许跨域读,写就是上行,发送请求,send request,读就是下行,接受响应,receive response;理解了这两条规则,以下现象我们也就能理解了;
1、表单默认提交(get、post)、超链接访问域外的资源,这是允许的,因为在点击按钮/超链接时,浏览器地址已经变了,这就是一个普通的请求,不存在跨域;
2、ajax(借助xmlhttprequest)跨域请求,这是被禁止的,因为ajax就是为了接受接受响应,这违背了,不允许跨域读的原则
3、jsonp属于跨域读且形式限制为GET方式,它利用了script标签的特性;这是允许的。因为浏览器把跨域读脚本,当作例外,类似的img、iframe的src都可以请求域外资源
解决方案:
方案1,给chrome浏览器添加参数,--disable-web-security
方案2
a,
非IE浏览器,利用xmlhttprequest,在request header添加origin:本域名地址,通常不需要手动添加,浏览器会动添加
IE浏览器,利用XDomainRequest发送请求,它会自动封装header中添加origin
b,response header添加access-control-allow-origin:*
跨域演示及代码
验证过程,首先访问http://本机ip:port/project_name/a.jsp,然后,a.jsp发送ajax请求,http://localhost:port/project_name/b.jsp,这样就产生了跨域的问题。
a.jsp
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
- <title>跨域演示</title>
- <script type="text/javascript" src="jquery-1.11.2.js"></script>
- <script type="text/javascript" src="jquery.form.js"></script>
- </head>
- <script type="text/javascript">
- $(document).ready(function() {
- $.getJSON('http://localhost/test_maven/b.jsp', function(data) {
- alert("request succeed");
- });
- });
- </script>
- </body>
b.jsp
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <%
- response.setHeader("Access-Control-Allow-Origin", "*");
- response.getWriter().write("hahahhaha");
- %>
如果注释掉response.setHeader("Access-Control-Allow-Origin", "*");,那么就会出现access control allow origin错误;使用通配符*,允许所有跨域访问,所以跨域访问成功。
但是,请注意使用通配符*,会允许来自任意域的跨域请求访问成功,这是比较危险的,所以在生产环境通常会做更精确控制;
简单请求
上述请求是简单请求,只要添加了Access-Control-Allow-Origin:*,就会访问成功,如果是复杂请求,我们需要更进一步的处理,才能成功。这里先解释一下什么是简单请求和复杂请求。
- Simple requests
- A simple cross-site request is one that meets all the following conditions:
- The only allowed methods are:
- GET
- HEAD
- POST
- Apart from the headers set automatically by the user agent (e.g. Connection, User-Agent, etc.), the only headers which are allowed to be manually set are:
- Accept
- Accept-Language
- Content-Language
- Content-Type
- The only allowed values for the Content-Type header are:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
简单来说,符合上述条件的都是“简单请求”,除了简单请求就是“复杂请求”。
复杂请求
在正式post之前,浏览器会先发出一个options请求(也叫preflight),同时header带上origin还有Access-Control-Request-*:**之类的头,服务器响应会返回相应的access-control-allow-origin,如果匹配,那么浏览器就会发送正式post,否则就会出现上述错误。这也解答了,跨域访问时,我们明明发送的post请求,失败的话,查看chrome network会发现是options方法的原因。
根据上述过程,后台方法额外需要options方法,以下是测试样例。
这里的content-type不属于(application/x-www-form-urlencoded,multipart/form-data,text/plain)中的任何一种,所以是复杂请求。
- $.ajax({
- type: "post",
- url: "http://localhost/test_maven/a_action",
- contentType: "application/json",
- dataType: "json",
- success: function(){
- alert("request succeed");
- }
- });
- @RequestMapping(value = "/a_action",
- method=RequestMethod.OPTIONS)
- public void aActionOption(HttpServletResponse response ) throws IOException{
- System.out.println("option execute.....");
- response.setHeader("Access-Control-Allow-Headers", "accept, content-type");
- response.setHeader("Access-Control-Allow-Method", "POST");
- response.setHeader("Access-Control-Allow-Origin", "http://192.168.8.36");
- }
- @RequestMapping(value = "/a_action",method=RequestMethod.POST)
- public void aAction(HttpServletResponse response ) throws IOException{
- System.out.println("a_action execute.....");
- }
第一次是options请求,http options请求跟get、post、head等一样,都属于http的请求方法,options方法,用来获取服务器端某url支持的方法,response header中allow标志支持的方法
第二次才是真正的请求
这个方案是利用了w3c的最新规范,所以该方案依赖浏览器的实现。
总结:
出现Access control allow origin错误,说明是跨域请求失败!浏览器发送请求成功,同时浏览器也接收到响应了,但是限制了XmlHttpRquest接收请求,不会让xmlhttprequest接受到响应,并且在js控制台报错。这也就是我们在网络控制台(Network)能看见http 状态码是200,但是在js控制台(Console)出现js错误的原因。
Access control allow origin 简单请求和复杂请求的更多相关文章
- 解决js ajax跨越请求 Access control allow origin 异常
// 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");
- 跨域请求错误: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource
今天在学习Angular 的HttpInterceptor 拦截器时,发现添加了新的headers键值之后总是报跨域错误.后台使用的是asp.net core. 检查发现,在添加了新的header之后 ...
- SELINUX、Security Access Control Strategy && Method And Technology Research - 安全访问控制策略及其方法技术研究
catalog . 引言 . 访问控制策略 . 访问控制方法.实现技术 . SELINUX 0. 引言 访问控制是网络安全防范和客户端安全防御的主要策略,它的主要任务是保证资源不被非法使用.保证网络/ ...
- Linux VFS Extended Attribute And Access Control Table
catalog . 简介 . 扩展属性 . 访问控制表 . 小结 0. 简介 许多文件系统都提供了一些特性,扩展了VFS层提供的标准功能,虚拟文件系统不可能为所有特性都提供具体的数据结构.超出标准的U ...
- Security Access Control Strategy && Method And Technology Research - 安全访问控制策略及其方法技术研究
1. 访问控制基本概念 访问控制是网络安全防范和客户端安全防御的重要基础策略,它的主要任务是保证资源不被非法使用.保证网络/客户端安全最重要的核心策略之一. 访问控制包括 入网访问控制 网络权限控制 ...
- 基于角色的权限控制系统(role-based access control)
role-based access control(rbac),指对于不同角色的用户,拥有不同的权限 .用户对应一个角色,一个角色拥有若干权限,形成用户-角色-权限的关系,如下图所示.当一个用户进行访 ...
- 介质访问控制子层-Medium Access Control Sublayer:多路访问协议、以太网、无线局域网
第四章 介质访问控制子层-Medium Access Control Sub-layer 4.1介质访问控制子层概述 MAC子层不属于之前提到的OSI或TCP/IP架构的任何一层,这也是为什么这一层被 ...
- Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' heade
XMLHttpRequest cannot load http://10.164.153.37:8050/WebService/WebService.asmx/wsGetStreetData. Res ...
- RBAC(Role-Based Access Control,基于角色的访问控制)
RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...
随机推荐
- eclipse调试程序界面简单介绍使用
右键程序 Debug 运行后 如下图:
- tomcat高并发配置调优
最近部署的tomcat,里面放了一个apk提供给测试人员测试,而有一天压测的时候,他们一致反馈下载不了,结果查看日志才发现如下错误: [html] view plain copy INFO: Maxi ...
- Android系统init进程启动及init.rc全解析
转:https://blog.csdn.net/zhonglunshun/article/details/78615980 服务启动机制system/core/init/init.c文件main函数中 ...
- Web安全学习笔记之Openvas配置,使用,报告
OpenVAS(开放式漏洞评估系统)是一个客户端/服务器架构,它常用来评估目标主机上的漏洞.OpenVAS是Nessus项目的一个分支,它提供的产品是完全地免费.OpenVAS默认安装在标准的Kali ...
- Activiti工作流引擎数据库表结构
Activiti工作流引擎数据库表结构 一.数据库表的命名 Acitiviti数据库中表的命名都是以ACT_开头的.第二部分是一个两个字符用例表的标识.此用例大体与服务API是匹配的. ACT_RE_ ...
- Vue组件里面data为什么必须是个函数
在创建或注册模板的时候,传入一个data属性用来绑定数据,但是在组件中,data必须是一个函数,而不能直接把对象赋值给它. export default { name:'app', data(){ r ...
- 20135320赵瀚青LINUX第五章读书笔记
第五章--系统调用 5.1 与内核通信 作用 1.为用户空间提供一种硬件的抽象接口 2.保证系统稳定和安全 3.除异常和陷入,是内核唯一的合法入口. API.POSIX和C库 关于Unix接口设计:提 ...
- IT最新最火的网络词汇*2*(文章来源电商)
P2P.P2C .O2O .B2C.B2B.C2C等等最新最火的网络用词直接将我们都弄晕了,特此今天将这些划时代意义的词汇总结起来,若有什么不足之处,希望各位评论指正. 大致意思为: 1. ...
- python-集合、字典
文件操作: open() read() readline() readlines() write() writelines() flush() #刷新缓冲区 seek() 修改文件读写指针 t ...
- HTML中的figure和gigcaption标签
参考自:anti-time的博客http://www.cnblogs.com/morning0529/p/4198494.html 在写xhtml.html中常常用到一种图片列表,图片+标题或者图片+ ...