跨域相关

1、概念

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

2、产生原因

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

3、浏览器跨域报错

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

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

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

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

　　2）请求类型是xhr请求

　　3）浏览器觉得不安全

4、解决思路【实现跨域的方式】

（1）JSONP

 

　　客户端: 客户端动态添加script元素，用script发送请求，代替ajax请求，并携带客户端一个函数名到服务端

 

　　服务端: 接收客户端发来的函数名，将函数名和要返回的数据拼接为一条可执行的js语句，返回

 

　　（前端$ajax处加上【dataType:'jsonp'】属性    |       后端框架中,修改res.json为res.jsonp）

（2）http代理服务器(http-proxy)

　　纯客户端跨域。在客户端配置一个代理服务器程序，代替ajax实际发送请求，获取数据。

　　因为不是ajax请求，所以，不受浏览器同源策略限制，可以随意发送跨域请求。

vue.config.js中:
       module.exports={
          … : … ;
　　　　　　devServer:{
  　　　　　　　proxy:{
    　　　　　　　　“/”:{
       　　　　　　　　target:”http://服务器端公共基础路径”,
       　　　　　　　　changeOrigin:true
　　　　　　　　　　} 
　　　　　　　　}
　　　　　　}
      }

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

　　客户端正常发送ajax请求，服务端定义响应头，允许指定来源的请求跨域访问:

　　　　res.writeHead(200,{

   　　　　…，

   　　　　“Access-Control-Allow-Origin”:”允许的请求来源域名”

　　　　})

5、jsonp和cors的区别

JSONP:

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

CORS:

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

6、嵌入iframe然后跨域通信

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

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

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