写点什么

调用 Express API 时出现奇怪的 CORS 错误该怎么办?

  • 2020-12-18
  • 本文字数:3288 字

    阅读完需:约 11 分钟

调用 Express API时出现奇怪的CORS错误该怎么办?

想象一下这样一个场景:你用 Express 创建了一个 API,然后给前端加了一些 JavaScript 代码,这些 JS 代码会向这个 API 发送请求。事情本来很顺利,然后你在浏览器中加载了前端,突然在控制台中看到了一个奇怪的错误:


Access to fetch at 'https://your-api.com/user/1234' from origin 'https://your-website.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
复制代码


然后你可能会试着按照错误消息的提示,将请求的模式设置为 no-cors,但是对 API 的请求还是跑不通。就算你在网上搜索一番,也很难搞清楚为什么会发生这种事情,该怎么才能解决它。


好消息是,有一个 Express 库可用来修复这些 CORS 错误,但在我们着手解决这些错误之前,我们是不是该看看它们到底是什么意思?为了理解这些错误,我们先来看一下 CORS 究竟是什么。


什么是 CORS?为什么它会毁掉你美好的一天?


CORS 是跨域资源共享(Cross-Origin Resource Sharing)的简写,并且所有现代浏览器都支持它。这个概念有点拗口,所以我们把它拆开来细看,才能了解它到底做的是什么事情。


什么是“资源”?


资源是可在特定 URL 获取的内容,如 HTML 网页、图像或 JSON API 响应。实际上,它是构成万维网的“砖块”。


什么是“来源”?


一份资源的来源(origin)是协议+域+端口,例如网址https://your-api.com:8080/user/1234的源是https://your-api.com:8080。如果网址不包含端口,则源就只有协议+域。


跨域资源共享到底是做什么的?


当 Web 浏览器需要确保网站的前端 JavaScript(来源 A)仅在另一来源(来源 B)明确允许的情况下才可以访问 B 的资源时,就要用到跨域资源共享。如果来源 B 确实给出了许可,那么资源就会跨域共享!


CORS 可以帮助阻止恶意网站访问和使用敏感数据。当你在浏览器中看到那些烦人的 CORS 错误时,实际上是你的 Web 浏览器正在尽最大努力保护你免受被识别为潜在恶意请求的威胁。


CORS 如何工作?


Web 浏览器决定是否允许跨域共享资源时,会在前端 JavaScript 发出的请求上设置 Origin 标头。然后,浏览器检查在资源响应上设置的 CORS 标头。它在响应上检查的标头取决于浏览器发出的请求类型,但响应至少必须将 Access-Control-Allow-Origin 标头设置为一个受许可的值,才能让 Web 浏览器对发起请求的前端 JavaScript 给出响应。


CORS 请求示例


跨域请求的一个示例是,从网页上的前端 JavaScript(托管在一个域「来源 A」上)发起一个 GET 请求,到你托管在另一个域(来源 B)的 API 端点上。


浏览器通过https://your-website.com/user-profile网页上的 JavaScript 发出的请求将包含以下信息:


> GET /user/1234 HTTP/1.1> Host: your-api.com> Origin: https://your-website.com
复制代码


Origin 请求标头是由 Web 浏览器自动设置的——出于安全原因,通过 fetch 请求时无法设置其值。为了让上面的示例 CORS 请求正确运行,你的 API 发出的响应应该是这个样子:


< HTTP/1.1 200 OK< Access-Control-Allow-Origin: https://your-website.com< Vary: Origin< Content-Type: application/json; charset=utf-8< {"name":"Existing Person"}
复制代码


请注意,Access-Control-Allow-Origin 响应标头的值与 Origin 响应的值是呼应的:https://your-website.com。Web 浏览器会看到这个 CORS 响应标头,并确认它具有与网页上的前端 JavaScript 共享响应内容的权限。现在我们对 CORS 的概念和作用有了更好的了解,是时候设置一些 CORS 标头并修复你在网页上遇到的错误了。


如何设置 CORS 标头并摆脱那些烦人的错误


如你在上面的示例中所看到的,对于 Web 浏览器来说,在对 API 的请求中发送 Origin 标头是很重要的,但在响应中发送所有重要的 Access-Control-*标头的是你的 API。这些 CORS 标头会告诉 Web 浏览器是否允许将来自 API 的响应提供给前端 JavaScript。


为了帮助你解决你烦人的 CORS 错误,你需要用到 cors middleware package 这个库。在终端中转到包含 Express 应用程序的目录,然后安装它:


npm install cors
复制代码


注意:在这篇博客文章中,我会链接到 GitHub(而非 npm)上的 cors 软件包,因为在撰写本文时,npm 上的这个包的文档已经过时了。


安装完成后,你需要在应用程序中 require 它(require express 之后直接处理它即可):


const cors = require("cors");
复制代码


如果在不传递任何配置选项的情况下在 Express 应用程序中调用 cors 中间件,则默认情况下,它将在 API 响应中添加 CORS 响应标头 Access-Control-Allow-Origin: *。这意味着任何来源(即任何域上的网页)都可以向你的 API 发出请求。除非你要构建供公众使用的 API,否则你肯定不希望这么做。因此我们需要配置 cors 中间件,配置成只有你的网站才能向你的 API 发出 CORS 请求:


/** * These options will be used to configure the cors middleware to add * these headers to the response: *  * Access-Control-Allow-Origin: https://your-website.com * Vary: Origin */const corsOptions = {  origin: "https://your-website.com"};/** * This configures all of the following routes to use the cors middleware * with the options defined above. */app.use(cors(corsOptions));app.get("/user/:id", (request, response) => {  response.json({ name: "Existing Person" });});app.get("/country/:id", (request, response) => {  response.json({ name: "Oceania" });});app.get("/address/:id", (request, response) => {  response.json({ street: "Gresham Lane", city: "Lakeville" });});
复制代码


一般来说,你需要像上面的示例一样为 Express 应用程序中的所有路由启用 CORS,但是如果你只想为特定路由启用 CORS,则可以按以下方式配置 cors 中间件:


/** * These options will be used to configure the cors middleware to add * these headers to the response: *  * Access-Control-Allow-Origin: https://your-website.com * Vary: Origin */const corsOptions = {  origin: "https://your-website.com"};// This route is using the cors middleware with the options defined above.app.get("/user/:id", cors(corsOptions), (request, response) => {  response.json({ name: "Existing Person" });});// This route is using the cors middleware with the options defined above.app.get("/country/:id", cors(corsOptions), (request, response) => {  response.json({ name: "Oceania" });});/** * We never want this API route to be requested from a browser, * so we don't configure the route to use the cors middleware. */app.get("/address/:id", (request, response) => {  response.json({ street: "Gresham Lane", city: "Lakeville" });});
复制代码


启用“复杂”CORS 请求


上面的示例是为简单的 GET 请求配置 CORS 的。对于其他许多类型的 CORS 请求,Web 浏览器将在发出实际 CORS 请求之前先发出 CORS“预检”(pre-flight)请求。这个预请求使用了 OPTIONS HTTP 方法,它可以帮助浏览器确定是否允许发出 CORS 请求。


cors 中间件提供了启用 CORS 预检的说明,并允许你配置在对预检请求的响应中发送的标头。


不用再担心 COR 了 S


希望本文能够帮助你全面了解 CORS,但有时我们确实很难弄清楚如何配置才能让 CORS 请求正常工作。下面列举一些有用的资源:



祝大家跨域资源共享愉快!


原文链接:How To Fix Those Confusing Cors Errors When Calling Your Express API

2020-12-18 11:552200

评论

发布
暂无评论
发现更多内容

第三周学习心得

cc

shell脚本的使用该熟练起来了,你说呢?(篇三)

良知犹存

Shell

《架构即未来:现代企业可扩展的Web架构流程和组织》.pdf

田维常

架构

架构师训练营第 12 周作业

netspecial

极客大学架构师训练营

架构训练营-week-12总结

于成龙

架构训练营

Java内存模型JMM详细解析

程序员 面试 并发编程 架构师

天下武功,唯“拆”不破之MECE原则一| 技术人应知的创新思维模型 (5)

Alan

职场成长 技术人应知的创新思维模型 组合创新 结构化思维 28天写作

图解MyBatis

田维常

《前端算法系列》如何让前端代码速度提高60倍

徐小夕

Java 算法 大前端

面试官:简单说一下RocketMQ整合SpringBoot吧

比伯

Java 编程 程序员 架构 计算机

架构训练营-week12-作业1

于成龙

架构师训练营第八周作业

丁乐洪

基于 getty 的分布式事务框架seata-golang 通信模型详解

apache/dubbo-go

dubbo dubbo-go dubbogo seata

记录一次腾讯c/c++ linux后台开发岗面试经历(面试题含答案)

linux大本营

c++ Linux 腾讯 后台开发 架构师

美团十年架构师精心分享:手写分布式消息中间件RocketMQ笔记

小Q

学习 面试 微服务 MQ 中间件

OSI七层模型与TCP/IP五层模型

Linux服务器开发

TCP/IP 网络协议栈 底层应用开发 Linux服务器开发 OSI

2021数字化投资规划,你做好了吗?

张凯峰

架构 业务架构

Tronex智能合约APP系统开发|Tronex智能合约软件开发

系统开发

架构师训练营第 12 周学习总结

netspecial

极客大学架构师训练营

2020最新最全的Java架构面试复习指南,掌握10%阿里P7没问题

Java架构之路

Java 程序员 架构 面试 编程语言

spring2.5.6+java6升级到spring4+java8了

阿水

Java spring 升级

怎么保护自己的音乐作品不被盗用,用FL制作防盗水印片段

懒得勤快

版权保护 音乐 音乐制作 编曲

网易游戏部门Java架构师必看的“完美版”Netty源码笔记

Java架构追梦

Java 学习 源码 架构 Netty

作业-第8周

arcyao

第三周设计作业

cc

TCC Demo 代码实现

Java 分布式事务 Demo TCC

刚参加完阿里P6面试归来(Offer已斩获),6点面试经验总结

Java架构之路

Java 程序员 架构 面试 编程语言

iOS面试高薪,进阶 你会这些呢嘛?

ios swift 面试

TRONex智能合约APP系统软件开发

系统开发

100+大厂应届offer,从7个维度全面分析

程序员小灰

编程 面试 面经 腾讯大厂

阿里聚划算5轮面试题:GC收集器、多线程锁、海量数据技术考核

Java架构之路

Java 程序员 架构 面试 编程语言

调用 Express API时出现奇怪的CORS错误该怎么办?_语言 & 开发_Simon Plenderleith_InfoQ精选文章