不同跨域方式实现原理

实现跨域方式

1.JSONP跨域方案
2.CORS跨域资源共享
3.基于http proxy实现跨域处理
4.基于post message实现跨域
5.基于iframe跨域
6.Web socket和nginx反向代理

跨域（非同源策略请求）
同源策略请求 ajax/fetch
跨域传输
（1）部署到web服务器上：同源策略
-xampp修改本地的host文件
（2）服务器拆分
Web服务器：静态资源；data服务器：业务逻辑和数据分析；图片服务器

同源跨域区分：协议域名端口号只要一个不同即跨域。
第三方开源数据接口

1.JSONP跨域的实现原理(需要服务器端的支持)
标签:-script -img -link -iframe 不存在跨域请求的限制
(1)本地创建script标签 src=”http://127.0.0.1:4000/list?callback=func”
Function func(){
//do something
}
(2)客户端向服务器发请求，同时会把本地的一个函数传递给服务器
(3)服务接到客户端发来的请求callback=func
(4)准备数据data={。。}
(5)给客户端返回数据“func（+JSON.stringify(data)+）”

Jsonp的缺点：JSONP只能处理GET请求，数据不安全。

原生实现：

<script>
  var script = document.createElement('script');
  script.type = 'text/javascript';

  // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
  script.src = 'http://www.daxihong.com:8080/login?user=admin&callback=jsonCallback';
  document.head.appendChild(script);

  // 回调执行函数
  function jsonCallback(res) {
      alert(JSON.stringify(res));
  }
 </script>

jsonCallback({“status”: 0, “user”: “admin”})

JQuery实现

$.ajax({
  url: 'http://www.domain2.com:8080/login',
  type: 'get',
  dataType: 'jsonp',  // 请求方式为jsonp
  jsonpCallback: "handleCallback",    // 自定义回调函数名
  data: {}
});

常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

2.CORS跨域资源共共享
服务器端express+node实例，客户端正常发起ajax

3.http proxy代理 （webpack webpack-dev-server中进行配置）

4.Ngnix服务器反向代理（linux部署）

5.postMessage

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200819172647357.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p1b196dW9fYmxvZw==,size_16,color_FFFFFF,t_70#pic_center
6.socket.io
WebSocket协议跨域
前端处理

服务器端处理

7.document.domain+iframe(实现同一个主域，不同子域的操作)