web跨域及cookie学习

  以前对于跨域相关的知识一致都很零碎，正好如今的代码中用到了跨域相关的，如今来对这些知识作一个汇总整理，方便本身查看，说不定也可能对你有所帮助。

本篇主要内容以下：

• 浏览器同源策略
• http 请求跨域
• http 请求跨域解决办法
• cookie 机制
• 如何共享 cookie

浏览器同源策略

  相信不少人在 web 入门时，都被跨域问题折磨的死去活来。要想彻底掌握跨域就得知道为何会有跨域这个问题出现。

  简单来讲跨域问题是由于浏览器的同源策略致使的。那浏览器为何要有同源策略呢？

  固然是为了安全。没有同源策略限制的浏览器环境是很是危险的（即便有了同源策略也不是百分百安全），有兴趣的能够去了解了解CSRF和XSS攻击。

  所谓的“同源”指的是“三个相同”：

• 协议相同。不能一个是 http 协议，一个是 https
• 域名相同
• 端口相同

<!-- more -->

若是非同源页面有如下限制：

• LocalStore 和 IndexDB 没法读取。这两个显然是不能读取的，可是 cookie 有点不同，放在后面单独说明
• DOM 没法获取,好比如法在页面 A 中经过 iframe 获取异源页面 B 的 DOM
• AJAX 请求没法读取（能够发送请求，可是没法读取到请求结果。好比在页面 A 中请求异源接口 B，请求会正常发出处理，可是在页面 A 中没法获取请求结果，除非响应头 Access-Control-Allow-Headers 中容许了页面 A 的源，这样就能读取到结果）

  可是这里有个例外，全部带“src”属性的标签均可以跨域加载资源，不受同源策略的限制，这样你应该能够想到一个比较古老的跨域解决方案（JSONP）,同时这个特性也会被用做 CSRF 攻击。

http 请求跨域

  在前端开发中常常会遇到跨域的问题，好比先后端分离中先后端部署在不一样的端口上，或者在前端页面中须要向另一个服务请求数据，这些都会被跨域所阻挡。

目前主要有如下几种办法解决跨域问题：

1. 关闭浏览器同源检查

  这个太暴力，也太不安全了，不用考虑。

1. jsonp 实现跨域请求

  前面说过了浏览器对于带 src 属性的标签均可以跨域的。所以 jsonp 的实现流失利用了这个特性，在页面中动态插入一个<script>标签,而后他的 src 属性就是接口调用地址，这样就能访问过去了，而后再讲返回内容特殊处理成当即执行的函数，这样就看起像进行了一次跨域请求。之因此不推荐这种方式，主要有如下两个缘由：

• 实现复杂,且须要先后台同时修改才能实现
• 只能进行 get 请求

1. 服务器设置运行跨域

  这种方法只须要后台作处理便能实现跨域，前面说的 http 跨域请求是可以发出去的，只是不能接收，那咱们只要在响应头Access-Control-Allow-Headers中加入容许请求的地址便可，以,分隔，同时*表明全部地址都容许。好比：

Access-Control-Allow-Headers:http://localhost:8081,http://localhost:8082

本方法是较为经常使用的一中跨域办法,只需简单修改服务端代码便可。

1. 请求代理

  这也是很是经常使用的一种跨域方法。跨域限制只是浏览器限制，服务端并无这个概念，所以咱们在前端仍是请求同域地址，而后在服务端作一个代理，将请求转发到真正的 ip 和端口上。一般使用 nginx 实现端口转发，好比下面一段 nginx 配置：

server {
    # /test1/abc 转发到 http://a.com:8011/abc
    location /test1/ {
        proxy_pass http://a.com:8011/;
    }

    # /test2/abc 转发到 http://b.com:8011/main/abc
    location /test2/ {
        proxy_pass http://b.com:8011/main/;
    }

    # /test3/abc 转发到 http://c.com:8011/test3/abc
    location /test3/ {
        proxy_pass http://c.com:8081;
    }
}

cookie 同源策略

  cookie 的同源策略是经过

Domain和path两个部分来共同确认一个 cookie 在哪些页面上可用。

  Domain肯定这个 cookie 所属的域名，不能带端口或协议。所以 cookie 即可在不一样端口/不一样协议下共享,只要域名相同。有一个例外是父子域名间也能共享 cookie，只需将 Domain 设置为.父域名。

  path就简单多了，经过 Domain 肯定哪些域名能够共享 cookie，而后在经过path来肯定 cookie 在哪些路径下可用。使用/表示全部路径均可共享。

具体以下：

• Domain : example,path : /a可获取 cookie:http://example:8081/a,https://example:8081/a
• Domain : example,path : /可获取 cookie:http://example:8081/a,https://example:8081/a , http://example:12/abcd
• Domain : .example,path : /a可获取 cookie:http://example:8081/a , https://localhost:8081/a , http://test.example:889/a

注意:在跨域请求中，即时目标地址有 cookie 且发起请求的页面也能读取到该 cookie，浏览器也不会将 cookie 自动设置到该跨域请求中。好比在http://localhost:8082/a页面中请求http://localhost:8081/abc,这两个地址下拥有共享cookie，http请求也不会携带cookie。

本篇原创发布于：FleyX 的我的博客

扫码关注微信公众号：FleyX 学习笔记,获取更多干货