跨域

回答

跨域的问题来源于：浏览器为了请求安全而引入的基于同源策略的安全特性。当页面和请求的协议，域名，端口号有一个不相同，浏览器判断两者不同源，即为跨域请求。注意跨域是浏览器的限制，服务端不受此影响。当产生跨域时，我们通过 JSONP，CORS，postMessage 等方式解决。

知识点深入

JSONP 原理

浏览器为了便利性，让出部分安全性，允许JS文件，css文件，图片等资源可以跨域请求

全局挂载一个接收数据的函数，创建一个script标签，src="url?callback=jsonp", 将script标签挂载到页面，向服务器发送请求。服务器接收参数，将对应的处理逻辑以jS形式发送给浏览器，当script元素接收到脚本代码后，就会自动执行它们。

window.jsonp = function(data) {
  // 处理逻辑
}

<script src="url?callback=jsonp"></script>

CORS 原理

CORS (Cross-Origin Resource Sharing)跨域资源共享，只需要服务端支持。

具体实现方式

CORS 将请求分为简单请求（Simple Requests）和需预检请求（Preflighted requests），不同场景有不同的行为

1.简单请求

不会触发预检请求的称为简单请求。当请求满足以下条件时就是一个简单请求：

请求方法：GET、HEAD、POST。请求头：Accept、Accept-Language、Content-Language、Content-Type。 Content-Type 仅支持：application/x-www-form-urlencoded、multipart/form-data、text/plain。

2.需预检请求

当一个请求不满足以上简单请求的条件时，浏览器会自动向服务端发送一个 OPTIONS 请求，通过服务端返回的 Access-Control-Allow-* 判定请求是否被允许。请求方法： put/delete 请求头： content-Type： application/json

CORS 引入了以下几个以 Access-Control-Allow-* 开头：

Access-Control-Allow-Origin 表示允许的来源 Access-Control-Allow-Methods 表示允许的请求方法 Access-Control-Allow-Headers 表示允许的请求头 Access-Control-Allow-Credentials 表示允许携带认证信息当请求符合响应头的这些条件时，浏览器才会发送并响应正式的请求。

为了减少预检请求的次数，我们让服务端设置 Access-Control-Max-Age （用来请求预检请求的有效期，单位为秒）较长的值，减少资源消耗

postMessage

即在两个 origin 下分别部署一套页面 A 与 B，A 页面通过 iframe 加载 B 页面并监听消息，B 页面发送消息。（监听 window.onmessage）

跨域 #

相关问题 #

回答 #

知识点深入 #

JSONP 原理 #

CORS 原理 #

postMessage #

跨域

相关问题

回答

知识点深入

JSONP 原理

CORS 原理

postMessage