前端跨域的常用解决方式（前端跨域的常用解决方式有）



一、什么是跨域？

浏览器有同源策略限制，协议、域名、端口号三者一样就是同源，三者只要有一个不同就是跨域。

二、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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/11960.html