离梦之殇 如梦之境

To See Outer. To See Inner.

同源策略和跨域方法备忘

同源

同源定义

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

同源策略

限制非同源的访问。

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

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

跨域

CORS

请求区分

简单请求
  • 使用 GET HEAD POST

  • Content-Type 的值仅限于text/plainmultipart/form-dataapplication/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 

Proudly powered by Hexo and Theme by Hacker
© 2021 Rainbow Yang