当前位置：Gxlcms > JavaScript > CORS（跨域）请求总结和测试

CORS（跨域）请求总结和测试

时间：2021-07-01 10:21:17 帮助过：3人阅读

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

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

请求方法	说明
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来指定

注意事项

设置了Access-Control-Allow-Credentials为true，或者有这个头，那么Access-Control-Allow-Origin就不能用*。
发送cookie时，Access-Control-Allow-Origin不能为*，cookie依然同源，只有服务器域名设置的cookie才会上传的。
原网页代码中的document.cookie也无法读取服务器域名下的cookie（客户端），通过xmlHttp.getResponseHeader("set-cookies")也不可以的。
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的。非简单请求两大步骤：

预验证“请求”，浏览器会发送请求方法为options的请求，然后会带上如下三个头

头部名称	说明
Origin	表示发送请求发送的源域名
Access-Control-Request-Method	需要跨域执行的请求方法（也可以叫动作）
Access-Control-Request-Headers	指定cors请求会额外发送的头部信息，给客户端自定义头部的机会

服务判断是否指定了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	指定本次预验证的有效期，单位：秒

注意：

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

3. 正确的设置：

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

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

以上就是CORS（跨域）请求总结和测试的详细内容，更多请关注Gxl网其它相关文章！