跨域相关

1、概念

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

2、产生原因

浏览器的同源策略：页面请求的接口地址，必须与页面的url地址处于同域上 （即域名、端口、协议相同）

3、浏览器跨域报错

（1）发起 ajax请求 的那个页面的地址 和 ajax接口地址 不在同一个域中

（2）跨域错误：不同源的ajax请求

（3）浏览器向web服务器发起http请求时 ，如果同时满足以下三个条件时，就会出现跨域问题，从而导致ajax请求失败

　　1）请求响应双方url不同源

　　2）请求类型是xhr请求

　　3）浏览器觉得不安全

4、解决思路

（1）请求响应双方不同源

• 补充script标签并设置它的src值为接口地址
• 改造接口返回函数调用表达式，并传入数据
• 在前端准备相应的函数

（2）改发JSONP

　　前端$ajax处加上【dataType:'jsonp'】属性

　　后端框架中,修改res.json为res.jsonp

（3）代理服务器

（4）跨域资源共享（CORS）【npm i cors】

　　基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通

　　无需客户端作出任何变化

　　服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头【res.setHeader('Access-Control-Allow-Origin',' * ')】

5、jsonp和cors的区别

JSONP:

• 不是ajax
• 只能支持get方式
• 兼容性好

CORS:

• 前端不需要做额外的修改，就当跨域问题不存在。
• 是ajax
• 支持各种方式的请求(post,get....)
• 浏览器的支持不好（标准浏览器都支持）

6、嵌入iframe然后跨域通信

父窗口向子窗口我们通过 iframe.contentWindow.postMessage 发 送消息

子窗口向父窗口我们通过 window.parent.postMessage 发送消息

后接受的话都是监听 window的message事件