面试知识点总结 - js 跨域消息传输

1. 跨域

URL：https://editor.csdn.net：8000/md/?not_checkout=1

1. 协议不同
2. 域名不同
3. 端口不同
4. 目录不同
5. 参数不同
   以上任意一个不同都是跨域
6. 不能跨域是浏览器的限制，如浏览器中使用xhr对象实现的ajax不能跨域

2. 跨文档消息传输（XDM即cross-document messaging）

1. postMessage(消息，指定消息接收方的域名)：发送消息

1. 第一个参数消息为字符串，不是字符串时可以调用JSON.stringify()和JSON.parse()

2. window的message事件，会在接收到消息时触发
3. message事件的event的属性：

1. data：postMessage()的第一个参数，即传来的消息
2. origin：发送消息的文档所在的域
3. source：发送消息的window对象的代理，只能通过这个代理调用postMessage()给发送方回复消息

3. CORS

CORS（Cross-Origin Resource Sharing 跨域资源共享）

1. w3c的一个标准
2. 定义了在访问跨域资源时，浏览器与服务器如何沟通
3. 原理是使用自定义的HTTP头让浏览器与服务器进行沟通，从而决定请求或响应是成功还是失败
4. 当添加Origin头部（包含请求页面的源信息，包括协议、域名、端口）时，服务器会根据这个头部信息决定是否给与响应，可以接受请求是，响应报文的头部会添加Access-Control-Allow-Origin来回发相同的源信息或*（所有域都可以）
5. ajax请求中，请求的URL为绝对地址时就可以实现CORS

4.Preflight请求

1. 请求头

1. Origin：请求的来源域
2. Access-Control-Request-Method：请求自身使用的方法
3. Access-Control-Request-Headers：自定义的头部信息，多个用逗号分隔
4. withCredentials：带凭据的请求（如cookie、HTTP认证、客户端SSL认证）

2. 响应头

1. Access-Control-Allow-Origin：允许的域，多个用逗号分隔
2. Access-Control-Allow-Methods：允许的方法，多个用逗号分隔
3. Access-Control-Allow-Headers：允许的头部，多个用逗号分隔
4. Access-Control-Max-Age：将这个Preflight请求缓存多长时间，单位是秒，第一次发送这个请求时会多一次HTTP请求
5. Access-Control-Allow-Credentials:true允许发送带凭据的请求

5. JSONP

1. 函数调用中的JSON，包含回调函数和数据
2. 原理：通过动态的<script>元素，指定其src为一个跨域的URL，URL参数为回调函数名及请求的其他参数，在服务器端调用该函数
3. <script>、<img>标签可以从其他域加载资源，请求在设置src时就开始了
4. get请求，支持浏览器和服务器双向通信，能直接访问响应文本res
5. 例子：

let script = document.createElement('script');
script.src = 'http://xxx.com/api/jsonp?callback=handleResponse&id=1';
document.body.insertBefore(script,document.body