每日一博 | 跨域请求产生错误的原因及处理方法
// 每日前端夜话 第428篇
// 正文共:1400 字
// 预计阅读时间:6 分钟
如果你在开发网站时曾经尝试通过框架或是浏览器的 fetch
、XHR
请求过外部 API 的话,那么一定遇到过跨域请求,还有那个触目惊心的 CORS 错误信息;今天咱们来讨论跨域问题的原因以及解决方法。
跨域请求
如果你没有没有遇过,可以试着在浏览器的 console
页输入下面的代码:
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
console.log(xhr.status === 200 ? xhr.responseText : 'error')
}
}
xhr.open('GET', 'https://google.com')
xhr.send()
这段代码通过调用浏览器的 XMLHttpRequest
对 Google 发出请求,而得到的结果如图所示:
这就是跨域请求问题,当通过 JavaScript 对不同的来源发送请求时,这个请求的响应就会被浏览器拦截,不交给 JavaScript 处理。这里的“不同来源”指的是目标资源与当前网页的域(domain)、通讯协议(protocol)或网络端口(port)只要有任一项不同,就算是不同来源。例如下面这几个例子:
假设当前用户在:https://example.com :
[✅] https://example.com/test -> 同域
[❌] https://m.example.com -> 不同域
[❌] https://example.com:3000 -> 端口不同
[❌] http://example.com -> 通讯协议不同
理解什么是跨域了,那为什么浏览器要把跨域请求资源拦截掉呢?
其实这是考虑到用户的信息安全。
假设小黑是一个恶意开发者,他编写的网站会尝试通过 XHR 打向百度、微博等目标网站;如果使用者原先就有目标网站的登录状态,小黑便能窥探他的隐私,得到不该取得的数据。再想想看,如果目标网站换成 Email、银行、电商,如果没有浏览器限制跨域请求的保护,恶意开发者便能为所欲为。
❝注意:跨域请求虽然会被浏览器拦截下来,但拦截的是响应(Response)而不是请求(Request)。
❞
解决方案
关于跨域请求的解决方案有很多,例如 JSONP,也就是通过 HTML 中没有跨域限制的标签如 img
、script
等,再通过指定回调函数,将响应的内容介接回 JavaScript 中;或是通过 iframe
,绕过跨域保护获取目标资源等。下面仅说明两种常见也相对正规的解决方式。
CORS
最标准、正确的解决方法是通过 W3C 规范 的“ 跨域资源共享(Cross-Origin Resource Sharing ,CORS)”,通过服务器在 HTTP 头中的设置,可以使浏览器能够获取不同来源的资源。
CORS 规范中,清楚定义了跨域存取控制的运作方式。
首先服务器端需要在响应头中加上如 Access-Control-Allow-Origin
、Access-Control-Request-Method
、Access-Control-Request-Headers
等设定,来限制服务器所能接受的来源、请求的方法、可携带的头等等。
当浏览器发送资源请求时,如果是简单请求便会直接送出请求;若不符合前述条件,则会通过预检(Preflighted)请求先敲敲门,确认是否可以通过服务器的限制,然后才会发送正式的请求。
❝CORS 除了上述內容外,也有关于 Cookies 的传送方式,如何允许跨域写入 Cookies 等内容。
❞
代理服务器
由于 CORS 的头设置是在服务器端,如果服务器是自己的,那么可以轻易的调整服务器设置,让前端能取得必要的资源;但如果你请求的是外部 API,总不能每次遇到 CORS 错误,就要求别人去修改头设置吧。
简单暴力的方法就是通过代理服务器帮我们获取资源;由于跨域保护的限制是浏览器的规范,只要不通过浏览器发送请求,自然也就不会有限制。
常见的作法是通过 nginx
做简单的反向代理;例如在自己的开发环境,前后端分离的架构,前后端服务分别启动在 3000 和 5000 端口,则可以用这样的配置:
server{
listen 3000;
server_name localhost;
location ^~ /api {
proxy_pass http://localhost:5000;
}
}
当前端需要发送 API 请求时,可以直接请求 localhost:3000/api/...
,这个请求会被 nginx
拦截,并转发给后端所在的 localhost:5000
,这样就能简单的绕过跨域保护了。
总结
跨域是前端常见的需求,CORS 的错误信息也是我们很容易被卡住的地方;其实只要清楚 CORS 规范中的 HTTP 头设置,并在服务器端做对应的调整,就可以顺利的完成跨域请求。
点分享
点收藏
点点赞
点在看
本文分享自微信公众号 - 前端先锋(jingchengyideng)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
GNOME 40 Beta 发布
GNOME 40 首个 Beta 版本已发布,GNOME 40 即是原计划 3.38 的下一版本——3.40。因此虽然版本号看起来突然猛增,但并不意味着会出现巨大变化。 当然,GNOME 40 还是带来了不少改进: GNOME Shell 已启用重新设计的概览区域,默认禁用已过期的扩展程序 Mutter 也包含重大更新,包括按需启动 Wayland 和默认采用水平工作区布局等 实验性支持更多的 WebExtensions API,以及对 GNOME Web 浏览器的改进 引入新的语言特性以及支持 GJS JavaScript 的新 API 改进 GNOME 计算器中的多项转换((频率、星期、世纪、年代等) GTK 4.1 提供了多项修复和改进 GVFS 改进了包含海量文件的文件夹的性能,增加了共享驱动器文件夹,以及其他新增内容 改进动画效果,以及其他视觉效果 …… ▲ 默认采用水平工作区布局和改进多显示器支持 ▲ 应用商店 最后,Beta 版本意味着功能和 API 已进入冻结阶段。值得注意的是,并非任意 Linux 发行版都提供了 GNOME 40,比如即将发布的 Ubuntu 21....
- 下一篇
Zettlr —— 用于学术撰写的 Markdown 编辑器
Zettlr 是一位名叫 Hendrik Erz 的德国社会学家/政治理论家创建的。Hendrik 创建了 Zettlr,因为他对目前的文字处理器感到不满意。他想要可以让他“专注于写作和阅读”的编辑器。 在发现 Markdown 之后,他在不同的操作系统上尝试了几个 Markdown 编辑器。但它们都没有他想要的东西。 根据 Hendrik 的说法 ,“但我不得不意识到没有为高效组织大量文本而写的编辑器。大多数编辑都是由编码人员编写的,因此可以满足工程师和数学家的需求。没有为我这样的社会科学、历史或政治学的学生的编辑器。“ 所以他决定创造自己的。2017 年 11 月,他开始编写 Zettlr。 文件无关的协作:你可以对文件进行任意控制 在一个地方保存所有的笔记和文字,可搜索 支持夜间模式 支持 citeproc 和你已有的文献数据库的引用 色彩高亮,支持主流编程语言 简单漂亮的导出到其他格式,诸如Pandoc,LaTeX, 和Textbundle 支持当前最先进的知识管理技术 具有集成热图的革命性搜索算法 界面截图:
相关文章
文章评论
共有0条评论来说两句吧...