一、简单请求与非简单请求

跨域请求分为简单与非简单请求,同时满足以下两种条件的可以确定为简单请求。 简单请求的请求方法

请求方法 说明
head 发送头部信息
get  
post  

简单请求的HTTP头信息

http头信息 说明
accept 指定客户端可以接受哪类信息,eg: image/git
accept-language 指定客户端可以接受的自然语言,如果没有指定,认为各语言都可以。eg:accept-language: zh-cn
content-language 描述实体报头和资源所用的自然语言。没有设置该规则认为实体内容将提供给所有的语言阅读
Last-Event-ID 最后一次接收到事件的标识符
content-type 实体报文和资源的类型,只限于三个值:application/x-www-form-unlencoded、multipart/form-data、text/plain

二、简单请求处理原理

请求头 说明
Access-Control-Allow-origin 指定可以跨域访问的网站,可以设置为*,表示所有res.setHeader("Access-Control-Allow-origin","http://localhost")
Access-Control-Allow-Credentials 有这个头或者值为true,表示可接受跨域的cookies。而withCredentials是客户端设置是否传递cookies到服务器。
Access-Control-Expose-Headers 默认cors请求。客户端的xmlHttpRequrest只能拿到Cache-Control、Content-Language、Content-Type、Exprise、Last-Modified、Pragma等6个字段,其他头就需要通过Access-Control-Expose-Headers来指定

注意事项

  1. 设置了Access-Control-Allow-Credentials为true,或者有这个头,那么Access-Control-Allow-Origin就不能用*。
  2. 发送cookie时,Access-Control-Allow-Origin不能为*,cookie依然同源,只有服务器域名设置的cookie才会上传的。
  3. 原网页代码中的document.cookie也无法读取服务器域名下的cookie(客户端),通过xmlHttp.getResponseHeader("set-cookies")也不可以的。
  4. xmlHttp可以获取到foo、boo对象
res.setHeader("Access-Control-Allow-origin","*");
res.setHeader("Access-Control-Expose-Headers", "foo,boo"),
res.setHeader("foo", "foo");
res.setHeader("boo", "boo");

三、非简单请求处理原理

如果请求方法是PUT、DELETE,或者Content-type的类型为applicetion/json的。非简单请求两大步骤:

  1. 预验证“请求”,浏览器会发送请求方法为options的请求,然后会带上如下三个头
头部名称 说明
Origin 表示发送请求发送的源域名
Access-Control-Request-Method 需要跨域执行的请求方法(也可以叫动作)
Access-Control-Request-Headers 指定cors请求会额外发送的头部信息,给客户端自定义头部的机会
  1. 服务判断是否指定了Access-Control-Allow-Origin头,并且值是可匹配的,验证通过则输出信息如下头部内容:
头部名称 说明
Access-Control-Allow-Methods 表明服务器支持的cors请求方法,多个用逗号隔开
Access-Control-Allow-Headers 如果请求有了Access-Control-Request-Headers头,必须返回此头,表明服务器支持的所有头部信息,多个用逗号隔开
Access-Control-Allow-Credentials 与简单请求一致
Access-Control-Max-Age 指定本次预验证的有效期,单位:秒

注意:

  1. Access-Control-Request-Headers和Access-Control-Request-Method不需要开发者来设置,这是浏览器自动识别的.Access-Control-Request-Headers根据请求的自定义头生成,而Access-Control-Request-Method根据请求的方法生成。
  2. headers设置不对的表现:

3. 正确的设置:

四、跨域cookie的处理(不行)

  1. 跨域是设置不了cookie的。服务端输出的cookie无效
  2. ajax获取set-Cookies头(客户端),会提示错误

CORS(跨域)请求总结和测试的更多相关文章

  1. Spring Boot Web应用开发 CORS 跨域请求支持:

    Spring Boot Web应用开发 CORS 跨域请求支持: 一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比 1. JSONP只能实现 ...

  2. 4 伪ajax:jsonp、cors 跨域请求

    一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...

  3. CORS跨域请求总结

    CORS跨域请求分为简单请求和复杂请求. 1. 简单请求: 满足一下两个条件的请求. (1) 请求方法是以下三种方法之一: HEAD GET POST (2)HTTP的头信息不超出以下几种字段: Ac ...

  4. CORS跨域请求规则以及在Spring中的实现

    CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...

  5. [转] 重定向 CORS 跨域请求

    非简单请求不可重定向,包括第一个preflight请求和第二个真正的请求都不行. 简单请求可以重定向任意多次,但如需兼容多数浏览器,只可进行一次重定向. 中间服务器应当同样配置相关 CORS 响应头. ...

  6. 重定向 CORS 跨域请求

    TL;DR 非简单请求不可重定向,包括第一个preflight请求和第二个真正的请求都不行. 简单请求可以重定向任意多次,但如需兼容多数浏览器,只可进行一次重定向. 中间服务器应当同样配置相关 COR ...

  7. Java实现CORS跨域请求

    问题 使用前后端分离模式开发项目时,往往会遇到这样一个问题 -- 无法跨域获取服务端数据 这是由于浏览器的同源策略导致的,目的是为了安全.在前后端分离开发模式备受青睐的今天,前端和后台项目往往会在不同 ...

  8. CORS——跨域请求那些事儿

    在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on th ...

  9. CORS跨域请求

    一.问题: 服务器端代码 from flask import Flask from flask import make_response from flask import jsonify app = ...

  10. CORS跨域请求[简单请求与复杂请求]

    CORS即Cross Origin Resource Sharing(跨来源资源共享),通俗说就是我们所熟知的跨域请求.众所周知,在以前,跨域可以采用代理.JSONP等方式,而在Modern浏览器面前 ...

随机推荐

  1. Jmeter中基本操作

    Jmeter中基本操作包括 1:线程组 2:HTTP信息头管理器 3:HTTP请求默认值 4:HTTP请求 5:查看结果树 操作步骤如下: 1.创建一个线程组 通俗的讲一个线程组,,可以看做一个虚拟用 ...

  2. pyspark如何遍历broadcast

    因为论文关系要用到pyspark,具体情形如下: 有一个list=['aaa','bbb','ccc','ddd'],然后有一个rdd内数据类型是str,eg:'abcdefg',正常如果是需要筛选数 ...

  3. Centos将yum源设置为阿里云的镜像源

    第一步:备份原有镜像源 mv /etc/yum.repo.d/Centos-Base.repo /etc/yum.repo.d/Centos-Base.repo.bak 第二步:下载阿里云的镜像源 w ...

  4. 关于Selenium3+python3.6自动化测试中iframe切换

    本篇内容主要表述以下几个问题: 1.iframe 这个是什么? 2.定位iframe 标签时遇到的几个报错总结. 3.显示等待与隐示等待的原理与优缺点. 4.无name,ID可变情况下的处理方式 5. ...

  5. thrift小试--C++

    [转自]http://blog.csdn.net/poechant/article/details/6618284# Thrift可以实现C++.Java.Python等多种语言的自动生成,此处以C+ ...

  6. 微信跳转,手机WAP浏览器一键超级跳转微信指定页面

    微信跳转,手机WAP浏览器一键超级跳转微信指定页面 这篇文章主要介绍了如何在手机浏览器wap网页中点击链接跳转到微信界面,需要的朋友可以参考下 先说第一种,最简单的唤起微信协议,weixin://主流 ...

  7. history.back(-1) 和history.go(-1) 有什么区别?

    history.back(-1) 返回上一页,当前页面的数据都没有保存下来.就像当前也没有出现过一样. history.go(-1)    返回上一页,当前页的内容都保存下来了,包括session,等 ...

  8. Rewrite JSON with Fetch

    1.重写json请求部分:HTML文件代码如下:<html>......<script> var myList = document.querySelector(‘ul‘); ...

  9. vue font-icon 图标

    1.vue 游览器左上角小图标 把.ico文件放在根目录下的static文件夹下,然后link标签引入 <link rel="shortcut icon" href=&quo ...

  10. PyCharm下载及使用

    PyCharm教育版是一款能够对你编写Python程序的工作有所帮助的免费编译器. PyCharm-community下载链接:https://pan.baidu.com/s/1Hwd_TOVA3en ...