CORS(跨域)请求总结和测试

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

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

请求方法

说明

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头(客户端),会提示错误

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏木子墨的前端日常

跨域相关

跨域是前端开发中经常遇到的一个问题,主要是由于请求的源地址与目标地址不同源产生的问题。下面我们就深入的了解和学习一下有关跨域的那些事儿。

1562
来自专栏Linyb极客之路

Nginx代理功能与负载均衡详解

Nginx的代理功能与负载均衡功能是最常被用到的,关于nginx的基本语法常识与配置已在上篇文章中有说明,这篇就开门见山,先描述一些关于代理功能的配置,再说明负...

1222
来自专栏cvm功能

通过控制台vnc方式登录云主机

1)打开控制台,点击到云服务器的实例一栏,找到要登录的云主机,点击最右侧的操作栏的登录按钮。

3.1K10
来自专栏Linux运维学习之路

day4、Linux基础题目

第一题 我想在/data/da 目录下面创建 一个 da.txt 文件  [root@ll ~]# cd /data/oldboyedu -bash: cd: ...

2498
来自专栏从流域到海域

数据库连接池

数据库连接池相关资料: 关于数据库连接池的使用,首先我们要明白我们为什么要用它,对应普通的数据库连接操作,通常会涉及到以下一些操作是比较耗时的: 网络通讯...

2397
来自专栏北京马哥教育

70条常用Linux基础命令总结

? [root@ping ~]# tree -L 1 / #使用tree 命令查看根目录下的一层的目录结构 ls - list directory co...

3827
来自专栏运维前线

CentOS 6.8 部署zookeeper集群

由于公司缓存方案改进,准备采用codis集群作为主要的缓存解决方案(codis:国内豌豆荚开发的redis集群解决方案,已开源,github地址:https:/...

25310
来自专栏蓝天

SSH2免密码登录精简详细说明

以下针对的是ssh2,而不是ssh。精简的意思是无多余步骤,详细是说关键细节都有提到。配置分两部分:一是对登录机的配置,二是对被登录机的配置,其中登录机为客...

732
来自专栏软件测试经验与教训

如何手写LR脚本?

教学网址:http://computer-database.gatling.io/computers

1082
来自专栏云计算教程系列

如何在Ubuntu 16.04中安装Linux,Nginx,MySQL,PHP(LNMP堆栈)

LNMP软件堆栈是一组可用于为动态网页和Web应用程序提供服务的软件。它是一个描述带有Nginx Web服务器的Linux操作系统的首字母缩写词。其后端数据存储...

1481

扫码关注云+社区

领取腾讯云代金券