区别：

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

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

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

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

, 否则就不能下载或显示,很多网站,如天涯就是通过Referer页面来判断用户是否能够下载图片

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

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

不包含任何路径信息。(一般跨域请求会出现）

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

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

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

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

• Cookie、LocalStorage、IndexedDB 等存储性内容

• DOM 节点

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

但是有三个标签是：

• <img src=XXX>

• <link href=XXX>

• <script src=XXX>

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

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

如果说，A网页是，B网页是，那么只要设置相同的document.domain，两个网页就可以共享Cookie。

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

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

域名

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

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

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

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

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

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

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

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

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

。它的值要么是，要么是一个*，表示接受任意域名的请求。

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

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

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

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

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

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

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

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是或，或者

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

服务器正常的回应。

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

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

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

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

Vue框架

4. nginx代理

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