一、什么是跨域？
浏览器有同源策略限制，协议、域名、端口号三者一样就是同源，三者只要有一个不同就是跨域。
二、9种方式
1、JSONP
2、CORS
3、http proxy
4、nginx反向代理
5、postMessage
6、socket.io
7、document.domain + iframe
8、document.name + iframe
9、location.hash + iframe
三、具体解决跨域的实现
1、JSONP （不常用）
原理：是利用<script>标签不存在跨域请求的限制
缺点：1、只能处理get请求 2、通过URl携带参数容易被劫持，不安全
举例：也可以动态的去创建<script>标签，原理在这随意发挥，只要是<script>标签即可
文件1：index.html
文件2：index.jsonp.js
后端接受请求参数，并返回客户端，客服端拿到数据后执行函数
2、CORS 跨域资源共享 （前端不需要做任何改变）
原理：后端设置可访问的请求源
缺点：1、设置具体地址，有局限性 2、设置多源（*）就不能允许携带cookie了
举例：
前端发送请求（axios是基于promise封装）
后端设置相关请求： *号为多源，也可以替换为具体地址
3、http proxy （常用）
原理：node + webpack + webpack-dev-server代理接口跨域
4、nginx反向代理 (不需要前端干啥)
5、postMessage
postMessage传递消息
onmessage接受消息
6、WebSocket协议跨域
7、基于iframe的 document.domain
缺点：只能实现：同一个主域，不同子域之间的操作
8、location.hash + iframe
9 、window.name + iframe
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/25857.html