HTTP 请求头CORS 跨域请求详解

ili_ii

已于 2023-03-17 16:03:43 修改

阅读量5.1k

点赞数 1

分类专栏：请求方式文章标签：前端 vue.js http Powered by 金山文档

于 2023-02-24 14:25:26 首次发布

原文链接：https://www.ruanyifeng.com/blog/2016/04/cors.html

版权

请求方式专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Requset Header（请求头）

origin/referer (源)

区别：

referer:通常referer会携带url的很多参数信息，这些隐私信息被暴露到外部网站，有可能会产生安全问题。

并且referer存在于所有请求中。

referer作用：

统计访问流量等。

Http协议头中的Referer主要用来让服务器判断来源页面。

即用户是从哪个页面来的,通常被网站用来统计用户来源,是从搜索页面来的,还是从其他网站链接过来,或是从书签等访问,以便网站合理定位。

直接在浏览器的地址栏中输入一个资源的URL地址，那么这种请求是不会包含 Referer 字段的。因为这是一个“凭空产生”的 HTTP 请求，并不是从一个地方链接过去的。或者从收藏夹/书签中访问。

防盗链

盗链是指服务提供商自己不提供服务的内容，通过技术手段绕过其它有利益的最终用户界面（如广告）。直接在自己的网站上向最终用户提供其它服务提供商的服务内容，骗取最终用户的浏览和点击率。

受益者不提供资源或提供很少的资源，而真正的服务提供商却得不到任何的收益

或下载时判断来源地址是不是在网站域名之内, 否则就不能下载或显示,很多网站,如天涯就是通过Referer页面来判断用户是否能够下载图片

3.安全验证，防止恶意请求

还可用做电子商务网站的安全，在提交信用卡等重要信息的页面用referer来判断上一页是不是自己的网站，如果不是，可能是黑客用自己写的一个表单，来提交，为了能跳过你上一页里的javascript的验证等目的。

注意：不要把Rerferer用在身份验证或者其他非常重要的检查上，因为Rerferer非常容易在客户端被改变。

Referer内容为空：允许设置为 Referer 为空，意味着你允许比如浏览器直接访问，就是空。

origin:

仅包含<协议，HOST，PORT>,不包含任何路径信息。(一般跨域请求会出现origin）

当我们的浏览器发出跨站请求时，行为正确的服务器会校验当前请求是不是来自被允许的站点。服务器就是通过 Origin 字段的值来进行的判断。

同源策略

含义：A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。

目的：为了保证用户信息的安全，防止恶意的网站窃取数据。Cookie 往往用来保存用户的登录状态，如果没有‘同源政策’，用户可以携带着登录后的Cookie 去访问别的网站。造成信息泄漏。

"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

同源策略限制内容有：

Cookie、LocalStorage、IndexedDB 等存储性内容

DOM 节点

AJAX 请求发送后，结果被浏览器拦截了

但是有三个标签是允许跨域加载资源：

<img src=XXX>

<link href=XXX>

<script src=XXX>

协议相同
域名相同
端口相同
http://www.example.com/dir/page.html
协议是http://、域名是www.example.com，端口是80（默认端口可以省略）

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

如果非同源，共有三种行为受到限制。

（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。

Cookie

Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享。

但是，两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie。

如果说，A网页是http://w1.example.com/a.html，B网页是http://w2.example.com/b.html，那么只要设置相同的document.domain，两个网页就可以共享Cookie。

document.domain ='example.com';

注意：这种方法只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 无法通过这种方法，规避同源政策

另外，服务器也可以在设置Cookie的时候，指定Cookie的所属域名为一级域名，比如.example.com

Set-Cookie: key=value; domain=.example.com; path=/

这样的话，二级域名和三级域名不用做任何设置，都可以读取这个Cookie。

域名

顶级域名 : 又称一级域名也被叫做域名后缀一般分为三类: 国家顶级域名(例如中国.cn 美国.us)、地区顶级域名/通用顶级域名(例如 .com代表商业机构、.net代表网络提供商、 .org表示非盈利组织的等)、新通用顶级域名(例如 .xyz、.top、.red等)，还有种特殊情况 .com.cn 之类的也是顶级域名。

二级域名：是在一级域名的基础上增加了域名主体,由两部分构成域名主体与一级域名之间用一个点分隔(例如: baodu.com)

三级域名：是在二级域名的基础上增加了主机名(例如: www.baidu.com),原则上可以无限制自由添加

cors

CORS 需要浏览器和后端同时支持.

浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求

简单请求

服务器根据浏览器Origin请求字段，判断来着哪个源（协议+域名+端口）。决定是否同意这次请求。

如果指定的源不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。

注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。

如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

Access-Control-Allow-Origin:http://api.bob.comAccess-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

（1）Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

（2）Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

（3）Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。

withCredentials 属性

上面说到，CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。

Access-Control-Allow-Credentials: true

另一方面，开发者必须在AJAX请求中打开withCredentials属性。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

但是，如果省略withCredentials设置，有的浏览器还是会一起发送Cookie。这时，可以显式关闭withCredentials。

xhr.withCredentials =false;

注意：如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。

同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

非简单请求

预检请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

var url ='http://api.alice.com/cors';
var xhr =newXMLHttpRequest();
xhr.open('PUT', url,true);
xhr.setRequestHeader('X-Custom-Header','value');
xhr.send();

"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

除了Origin字段，"预检"请求的头信息包括两个特殊字段。

（1）Access-Control-Request-Method

该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

（2）Access-Control-Request-Headers

该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。

如果浏览器请求包括Access-Control-Request-Headers字段，则服务器响应的Access-Control-Allow-Headers字段是必需的。

预检请求的回应

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin:http://api.bob.comAccess-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

上面的HTTP回应中，关键的是Access-Control-Allow-Origin字段，表示http://api.bob.com可以请求数据。该字段也可以设为星号，表示同意任意跨源请求。

如果服务器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。

XMLHttpRequest cannot load http://api.alice.com.
Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

服务器回应的其他CORS相关字段如下。

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

（1）Access-Control-Allow-Methods

该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

（2）Access-Control-Allow-Headers

如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

（3）Access-Control-Max-Age

该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

浏览器的正常请求和回应

一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

下面是"预检"请求之后，浏览器的正常CORS请求。

PUT /cors HTTP/1.1
Origin:http://api.bob.comHost: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive

上面头信息的Origin字段是浏览器自动添加的

服务器正常的回应。

Access-Control-Allow-Origin:http://api.bob.com
Content-Type: text/html; charset=utf-8

Access-Control-Allow-Origin字段是每次回应都必定包含的。

解决跨域的方法

jsonp，代表：jquery的$.ajax。（仅限JQuery项目使用）

script标签解决跨域（远古web使用的方案，已不建议使用）

前端代理（要前后端都允许跨域）

react框架

Vue框架

nginx代理

server {
     listen       80; 
        server_name  www.xxx.com;
        #判过滤出含有api的请求
        location /api/ { 
            proxy_pass http://192.168.0.**:8888; #真实服务器的地址
        }
}

后端（逻辑层）设置响应头（不建议使用，安全性不高，小练习可以用用，方便）

//响应头
Access-Control-Allow-Origin':'http:/ /192.168.0.***:8080'

ili_ii

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTTP 请求头CORS 跨域请求详解

它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。还可用做电子商务网站的安全，在提交信用卡等重要信息的页面用referer来判断上一页是不是自己的网站，如果不是，可能是黑客用自己写的一个表单，来提交，为了能跳过你上一页里的javascript的验证等目的。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。
复制链接

扫一扫