Ajax 如何解决跨域问题
2023-02-25 18:16:29 时间
在 Web 开发过程中经常使用 Ajax 来异步的获取数据,尤其是在前后端分离的架构中基本上都是通过 Ajax 获取数据,渲染页面都由前端浏览器来完成。通常这种前后端分离的架构,对于前端开发者来说已经像开发客户端 App 一样的开发 Web,获取数据也有专门封装好的 RESTful Client 组件来获取数据,不过它的原理也是使用了浏览器的 XMLHttpRequest 这个对象来实现异步请求数据。
但是当在域 domain-a.com 下想要通过 Ajax 来请求域 domain-b.com 的数据时,会遇到跨域的问题,通常这种跨域是不被浏览器允许的,如何解决呢?
JSONP
JSONP 是一个解决方案,它的原理:
- 在 HTML 中创建一个<script src=””>标签,其中src属性中的地址就是接口地址;
- 并创建好回调方法,把得到数据后的逻辑写到这个方法中;
- 接口地址返回一段 JavaScript ,其内容为执行回调方法并传入 JSON 数据;
- 在创建<script src=””>标签的同时监听onload或者onreadystatechange事件;
- 当这一段 JavaScript 下载完成后,立即运行该段 JavaScript;
- 此时已经拿到了数据,并开始执行处理这部分数据的逻辑。
当然这种方式巧妙的利用了外部的引用脚本来避开跨域,但是它只能 GET,不能进行 POST、PUT、DELETE 等 HTTP 方法,是一个阉割版的跨域方案。
Flash
这种方式采用浏览器插件来解决跨域问题,不过 Flash 面对强大的 HTML5 逐渐消失在历史的舞台,这种方式不太建议使用。如果有兴趣的同学可以看相关文档点这里。
CORS
CORS 定义一种跨域访问的机制,可以让 Ajax 实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 Ajax 请求。实现此功能非常简单,只需由服务器发送一个响应标头Access-Control-Allow-Origin:*即可。
Proxy
代理的方式,通过代理将原本发送到另外一个域名的请求,发送到当前域下的某个 URL,通过服务器端转发到目标服务器,这样就不存在跨域问题了。
相关文章
- Jgit的使用笔记
- 利用Github Action实现Tornadofx/JavaFx打包
- 叹息!GitHub Trending 即将成为历史!
- 微软软了?开源社区讨论炸锅,GitHub CEO 亲自来答
- GitHub Trending 列表频现重复项,前后端都没去重?
- Photoshop Elements 2021版本软件安装教程(mac+windows全版本都有)
- (ps全版本)Photoshop 2020的安装与破解教程(mac+windows全版本都有)
- (ps全版本)Photoshop cc2018的安装与破解教程(mac+windows全版本,包括2023
- 环境搭建:Oracle GoldenGate 大数据迁移到 Redshift/Flat file/Flume/Kafka测试流程
- 每个开发人员都要掌握的:最小 Linux 基础课
- 来撸羊毛了!Windows 环境下 Hexo 博客搭建,并部署到 GitHub Pages
- 超实用!手把手入门 MongoDB:这些坑点请一定远离
- 【GitHub日报】22-10-09 zustand、neovim、webtorrent、express 等4款App今日上新
- 【GitHub日报】22-10-10 brew、minio、vite、seaweedfs、dbeaver 等8款App今日上新
- 【GitHub日报】22-10-11 cobra、grafana、vue、ToolJet、redwood 等13款App今日上新
- Photoshop 2018 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2017 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2020 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2023 资源免费下载(mac+windows全版本都有,包括最新的2023)
- 最新版本Photoshop CC2018软件安装教程(mac+windows全版本都有,包括2023