浏览器同源策略和跨域

同源策略

同源策略是对JavaScript代码对Web内容的操作权限的一个安全限制。

它规定了一段JavaScript代码只能对来自相同网络协议，相同域名，相同端口的Web内容进行操作。

举个例子：

http://www.example.com	https://www.example.com	不同源！网络协议不同
http://www.example.com:3000	http://www.exampke.com:80	不同源！端口不通
http://www.example.com	http://wap.example.com	不同源！域名不同

值得注意的是：本机地址127.0.0.1和localhost也是不同源的

 

跨域方法

一、设置Document.domain

domain默认存储的是当前页面完整的域名（主机名），但是可以修改

当两个窗口将domain的值设为相同的值后，就能进行跨域交互。

这种方法多用于一个主站，多个子域的网站。

使用方法：

Document.domain='example.com'

domain的值必须带有顶级域名

也不能只有顶级域名

需要'example.com'或者‘a.example.com’类似的格式

二、跨域资源共享CORS

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

简单请求

（1) 请求方法是以下三种方法之一：

• HEAD
• GET
• POST

（2）HTTP的头信息不超出以下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值 application/x-www-form-urlencoded , text/plain , multipart/form-data

使用方法：

Web端：

需要发送一个XMLHttpRequest请求，格式和Ajax一样

不同的是，浏览器会自动添加一个Orangin请求头，表示发起请求的域,而且如果请求域不在允许范围内,不能通过状态码检测到错误,可能会返回200;

服务端：

header('Access‐Control‐Allow‐Origin: *');//设置响应头

服务端响应会返回三个有关的头信息:

Access-Control-Allow-Origin:             允许请求的域

Access-Control-Allow-Credentials:    是否允许发送cookie

Access-Control-Expose-Headers:       可以返回的字段,如未设置,只返回六个基本头信息

非简单请求

除了简单请求三种方式之外的请求方式,都为非简单请求,

非简单请求浏览器会发送一个预检信息

包括:

Origin: 请求域

Access-Control-Request-Method:请求方法

Access-Control-Request-Headers:逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段

预检回应:

Access-Control-Allow-Methods

Access-Control-Allow-Headers

Access-Control-Allow-Credentials

Access-Control-Max-Age:预检有效期单位为秒,有效期为20天

三、jsonp

jsonp是一种利用script标签进行跨域请求的方法，只支持GET方式并且需要服务端配合，数据以函数参数的形式返回到请求端；

使用方法：

<script src="http://www.example.com?callback=foo"></script>

服务器返回的数据格式：

foo({
"data":"hello world"
})

因为数据是以函数参数的形式返回，所以可以直接调用。

外链:https://www.slartbartfast.cn/articlePage.php?articleid=250