• 参考：【MJ亲授】网络协议从入门到底层原理

目录

• 快速开始
• CORS
• Cookie

快速开始

一、同源策略

协议 + 域名 + 端口 都相同就是同源

前后端分离后，资源和资源内请求的url不是同源，那么就会存在跨域的问题
相关的请求头字段：Origin
相关的响应头字段：Access-Control-Allow-Origin
跨域后不是服务器不返回数据，是浏览器不解析数据

Ajex异步请求受同源策略影响

为什么img标签和css不受同源策略影响？
异步请求受同源策略影响，一般来说，直接加载页面的 HTML、CSS、图像等静态资源不会受同源策略的限制。例如，使用 标签加载图像 xy:应为这些静态资源没有用户数据，所以不存在安全性问题。
xy:即使是图片也是浏览器在解析，拿不到图片的数据。如果不是使用img标签，而是发请求要图片的二进制数据就会受同源策略的影响

二、cookie

为什么需要cookie？ http请求是无状态的,cookie可以是http请求有状态，比如登录状态
token也是一种方案

相关的请求头字段：Cookie
相关的响应头字段：Set-cookie

session
Session是针对浏览器的，不是针对用户的
xy:小明的浏览器的cookie存储了sessionId,通过这个sessionId就可以找到服务器对应的Session
xy:Session内存储了使用这台浏览器的用户比如mj,tom,…等的登录状态。 xy:session = creatSession(); session.add(“mj”,true);session.add(“tom”,true)

CORS

一、同源策略

浏览器有个同源策略/SOP（Same origin policy）
它规定了：默认情况下，AJAX请求只能发送给同源的URL
同源是指3个相同：协议、域名（ip）、端口。

下表给出了与URL http://store.company.com/dir/page.html的源进行对比的示例

img、script、link、iframe、video、audio等标签不受同源策略的影响

二、前后端分离

1、前后端部署在同一台服务器

前端页面中的请求与后端在同一台服务器，不存在跨域问题

2、前后端分离

一般开发中，前端开发与后台开发是独立的两个项目，不会部署在同一台服务器，这样就会存在跨域的问题

3、解决AJAX跨域请求的常用方法

CORS (Cross-Origin Resource Sharing),跨域资源共享，CORS的实现需要客户端和服务器同时支持

客户端
所有的浏览器都支持（IE至少是IE10版本）
客户端在跨域请求时，请求头会有一个Origin来表示源

服务器
需要返回相应的响应头（比如Access-Control-Allow-Origin）
告知浏览器这是一个允许跨域访问的请求,这时浏览器就不会报错，并且展示服务器返回的数据

//可以选择使用Origin来处理，也可以不选择，自主决定


//设置CORS，允许别人能够跨域访问
response.setHeader("Access-Control-Allow-Origin","http://localhost:63342);

这里需要注意：
如果服务器不设置Access-Control-Allow-Origin响应头，并不是说就不返回数据（数据会照样返回），而是浏览器拿到数据后发现服务器没有允许跨域访问就直接报错了。

Cookie

http协议是无状态的
那么我们登录一个网站后，跳转其它页面它是如何知道我们已经登录的？
或者我们在购物网站，在商品页面将加入购物车之后，在其它商品页面也能看到之前加入购物车的商品，这又是如何实现的？

实现的方式有很多种，Cookie/Session技术只是其中一种

一、登录失败的情况

登录失败，客户端与服务器都不会有多余的操作

二、登录成功的情况

如图：
1、小明的浏览器获取login.html资源并展示

2、小明的浏览器在login.html页面调用login接口进行登录。
服务器在验证用户名和密码正确后，会创建一个Session对象（Session的创建时机可自主决定），并给Session对象分配一个id属性
同时username和password可以根据业务需要存储或不存储。
Session对象是存储在内存中的只要服务器不关机就一直存在
只要创建Session会同时在响应头返回一个Set-Cookie:JSESSIONID=666

3、小明的浏览器收到响应报文之后会将Cookie,包含了JSESSIONID=666，domain=localhost:8080 path:/xx存储在本地（硬盘）

4、小明的浏览器调用localhost:8080/xx/users请求的时候会比对path，然后携带Cookie发送给服务器，服务器比对JSESSIONID后返回users的json数据

5、小白的浏览器也是同样的步骤

三、重定向

如果在登录之前小明就调用localhost:8080/cs/users会发生什么情况？
服务器会返回 302 Location:http://localhost:8080/cs/login.html 重定向到登录界面

注意上图Session创建的时机

四、添加购物车演示

行者常至，为者常成！