离梦之殇 如梦之境

同源

同源定义

是指 协议，域名，端口 全都相同

同源策略

限制非同源的访问。

有三个标签是允许跨域加载资源：

• <img src=XXX>
• <link href=XXX>
• <script src=XXX>

跨域

CORS

请求区分

简单请求

• 使用 GET HEAD POST

• Content-Type 的值仅限于text/plain 、multipart/form-data、 application/x-www-form-urlencoded
• Accept
• Accept-Language
• Content-Language

• Last-Event-ID

复杂请求

需要用OPTIONS预检。

请求头字段有：

• Origin
• Access-Control-Request-Method
• Access-Control-Request-Headers

服务器相应的响应头信息为：

• Access-Control-Allow-Origin

• Access-Control-Allow-Methods

• Access-Control-Allow-Headers

  以及

• Access-Control-Allow-Credentials

• Access-Control-Max-Age

1
2
3
4
5

// 一些例子
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

postMessage

发送

1

window.postMessage(message, targetOrigin, [transfer]);

接收

1
2
3

window.onmessage = function(e) {
	console.log(e.data)
}

document.domain

只能用于二级域名相同的情况下

通过设置document.domain，实现同域

JSONP

使用JS，需要服务器支持

服务器代理

使用NodeJs或者nginx等服务器作为中介。

其他

标签中添加crossorigin

访问不再不受限制，而是通过使用CORS的方式加载。但是安全性更好，并且有更详细的报错。

1

crossorigin = anonymous | use-credentials