一、什么是跨域?
浏览器有同源策略限制,协议、域名、端口号三者一样就是同源,三者只要有一个不同就是跨域。
二、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