原文地址：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

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  6. <title>跨域演示</title>
  7. <script type="text/javascript" src="jquery-1.11.2.js"></script>
  8. <script type="text/javascript" src="jquery.form.js"></script>
  9. </head>
  10. <script type="text/javascript">
  11. $(document).ready(function() {
  12. $.getJSON('http://localhost/test_maven/b.jsp', function(data) {
  13. alert("request succeed");
  14. });
  15. });
  16. </script>
  17. </body>

b.jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <%
  4. response.setHeader("Access-Control-Allow-Origin", "*");
  5. response.getWriter().write("hahahhaha");
  6. %>

如果注释掉response.setHeader("Access-Control-Allow-Origin", "*");，那么就会出现access control allow origin错误；使用通配符*，允许所有跨域访问，所以跨域访问成功。

但是，请注意使用通配符*，会允许来自任意域的跨域请求访问成功，这是比较危险的，所以在生产环境通常会做更精确控制；

简单请求

上述请求是简单请求，只要添加了Access-Control-Allow-Origin：*，就会访问成功，如果是复杂请求，我们需要更进一步的处理，才能成功。这里先解释一下什么是简单请求和复杂请求。

  1. Simple requests
  2. A simple cross-site request is one that meets all the following conditions:
  3. The only allowed methods are:
  4. GET
  5. HEAD
  6. POST
  7. 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:
  8. Accept
  9. Accept-Language
  10. Content-Language
  11. Content-Type
  12. The only allowed values for the Content-Type header are:
  13. application/x-www-form-urlencoded
  14. multipart/form-data
  15. 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)中的任何一种，所以是复杂请求。

  1. $.ajax({
  2. type: "post",
  3. url: "http://localhost/test_maven/a_action",
  4. contentType: "application/json",
  5. dataType:  "json",
  6. success: function(){
  7. alert("request succeed");
  8. }
  9. });
  1. @RequestMapping(value = "/a_action",
  2. method=RequestMethod.OPTIONS)
  3. public void aActionOption(HttpServletResponse response ) throws IOException{
  4. System.out.println("option execute.....");
  5. response.setHeader("Access-Control-Allow-Headers", "accept, content-type");
  6. response.setHeader("Access-Control-Allow-Method", "POST");
  7. response.setHeader("Access-Control-Allow-Origin", "http://192.168.8.36");
  8. }
  1. @RequestMapping(value = "/a_action",method=RequestMethod.POST)
  2. public void aAction(HttpServletResponse response ) throws IOException{
  3. System.out.println("a_action execute.....");
  4. }

第一次是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 简单请求和复杂请求的更多相关文章

  1. 解决js ajax跨越请求 Access control allow origin 异常

    // 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");

  2. 跨域请求错误： 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之后 ...

  3. SELINUX、Security Access Control Strategy && Method And Technology Research - 安全访问控制策略及其方法技术研究

    catalog . 引言 . 访问控制策略 . 访问控制方法.实现技术 . SELINUX 0. 引言 访问控制是网络安全防范和客户端安全防御的主要策略,它的主要任务是保证资源不被非法使用.保证网络/ ...

  4. Linux VFS Extended Attribute And Access Control Table

    catalog . 简介 . 扩展属性 . 访问控制表 . 小结 0. 简介 许多文件系统都提供了一些特性,扩展了VFS层提供的标准功能,虚拟文件系统不可能为所有特性都提供具体的数据结构.超出标准的U ...

  5. Security Access Control Strategy && Method And Technology Research - 安全访问控制策略及其方法技术研究

    1. 访问控制基本概念 访问控制是网络安全防范和客户端安全防御的重要基础策略,它的主要任务是保证资源不被非法使用.保证网络/客户端安全最重要的核心策略之一. 访问控制包括 入网访问控制 网络权限控制 ...

  6. 基于角色的权限控制系统（role-based access control）

    role-based access control(rbac),指对于不同角色的用户,拥有不同的权限 .用户对应一个角色,一个角色拥有若干权限,形成用户-角色-权限的关系,如下图所示.当一个用户进行访 ...

  7. 介质访问控制子层-Medium Access Control Sublayer：多路访问协议、以太网、无线局域网

    第四章 介质访问控制子层-Medium Access Control Sub-layer 4.1介质访问控制子层概述 MAC子层不属于之前提到的OSI或TCP/IP架构的任何一层,这也是为什么这一层被 ...

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

  9. RBAC（Role-Based Access Control，基于角色的访问控制）

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...

随机推荐

  1. HDU - 4609 3-idiots (FFT+母函数)

    题意:给N个数,求任意选三个数能构成三角形的概率 分析:枚举两条边之和的复杂度\(O(N^2)\),显然不行,所以要更高效地做到枚举出两边之和. 所以用生成函数搭配FFT在\(O(NlogN)\)的时 ...

  2. 论文笔记：空间变换网络（Spatial Transformer Networks）

    2015, NIPS Max Jaderberg, Karen Simonyan, Andrew Zisserman, Koray Kavukcuoglu Google DeepMind 为什么提出( ...

  3. myeclipse自动生成相应对象接收返回值的快捷键

    在你要自动生成返回值对象的那一行的末尾(注意一定要将光标点到最后),按Alt+Shift+L:就可以了.

  4. Windows下编译live555源码

    Windos下编译live555源码 环境 Win7 64位 + VS2012 步骤 1)源码下载并解压 在官网上下载最新live555源码,并对其进行解压. 2)VS下建立工程项目 新建Win32项 ...

  5. Elasticsearch+Kibana+Logstash安装

    安装环境: [root@node- src]# cat /etc/redhat-release CentOS Linux release (Core) 安装之前关闭防火墙 firewalld 和 se ...

  6. 20145321 《Java程序设计》第3周学习总结

    20145321 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 4.1 类与对象 1.定义类:类定义时用关键词 class. 一个原始码中可以有多个类定义,但只能有一个公开 ...

  7. linux怎么上真正的国际互联网

    1.安装git yum install -y git 2.执行git clone git@github.com:XX-net/XX-Net.git 3.升级python到python 2.7(妈妈说p ...

  8. 如何更改nagios监控默认的检查时间

    /usr/local/nagios/etc/nagios.cfg: interval_length 表示时间单位,默认为60,即1分钟 /usr/local/nagios/etc/objects/se ...

  9. 一致性hash演示

    看到点关于一致性hash的说明,觉得挺有意思,就想体验一下. 上代码看看,体会一下在一致性hash环境下的cache和获取. 因为是小代码演示,没有很细致,包括hash函数就是用取余操作,但活生生的显 ...

  10. JS中函数定义和函数表达式的区别

    摘要: (function() {})();和(function(){}());的区别 Javascript中有2个语法都与function关键字有关,分别是: 函数定义:function Funct ...