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事件