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请求,数据不安全。
2.CORS跨域资源共共享
服务器端express+node实例,客户端正常发起ajax
3.http proxy代理 (webpack webpack-dev-server中进行配置)
![在这里插入图片描述](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协议跨域
前端处理
服务器端处理