一文了解跨域

跨域来源

浏览器为了确保资源安全,而遵循的一种策略. 称为「同源策略」

定义

源 = 协议 + 域名 + 端口号

实例

源1	源2	是否同源
http://x.cnki.net	https://x.cnki.net	否
https://x.cnki.net	https://www.cnki.net	否
http://x.cnki.net:8901/sso	http://x.cnki.net:8902/sso	否
http://x.cnki.net/sso	http://x.cnki.net:80/sso	否
https://x.cnki.net/search	https://x.cnki.net/xmlread/readonline.ashx	是

同源请求

所处源于目标源一致, 称为「同源」

所处源与目标源不一致, 称为「非同源」, 或「异源」, 或「跨域」

浏览器对跨域的限制

1. DOM访问限制: 「源A」的脚本不能读取和操作「源B」的DOM
2. Cookie访问限制: 「源A」不能访问「源B」的Cookie
3. Ajax访问数据限制: 「源A」可以给「源B」发送请求, 但是无法获取「源B」的响应数据

几个注意点

1. 跨域限制仅存在与浏览器端, 服务器端不受影响
2. 即使跨域, Ajax也可以正常发出
3. <link> <script> <img> 等标签的请求也可能跨域, 但是浏览器对标签跨域不做严格限制, 几乎不影响开发

解决方案

CORS解决Ajax跨域问题

CORS概述

全称: Cross-Cross-Origin Resource Sharing 「跨域资源共享」, 是用于控制浏览器校验跨域请求的一套规范.

服务器依照CORS规范, 添加特定的响应头来控制浏览器校验

规则如下:

1. 服务器明确表示拒绝跨域请求, 或者没有表示, 则浏览器校验不通过;
2. 服务器明确表示允许跨域请求, 则浏览器校验通过

CORS解决简单请求的跨域

sequenceDiagram
所处源 ->> 目标源: 发送请求
目标源 ->> 所处源: 响应

TODO