2025年前端跨域的常用解决方式(前端跨域的常用解决方式有)

前端跨域的常用解决方式(前端跨域的常用解决方式有)一 什么是跨域 浏览器有同源策略限制 协议 域名 端口号三者一样就是同源 三者只要有一个不同就是跨域 二 9 种方式 1 JSONP 2 CORS 3 http proxy nbsp nbsp 4 nginx 反向代理 5 postMessage 6 socket io 7 document domain nbsp iframe 8 document name nbsp iframe 9 location hash nbsp iframe 三 具体解决跨域的实现 1



一、什么是跨域?

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

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

编程小号
上一篇 2025-03-03 14:30
下一篇 2025-02-13 20:27

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ri-ji/25857.html