作为前端开发人员，你是否曾经遇到过这样的情况：需要向产品经理展示演示内容，却发现API返回的数据有错误；或者因为后端团队尚未提供修复方案，导致你无法继续进行前端开发？
更糟糕的是，有时候还会出现CORS错误，使得你根本无法正常显示页面内容。
这种事情确实会发生吧？理想情况下，应该尽快联系后端团队来解决这些问题，但在大多数情况下这并不现实。这取决于后端开发人员的可用性、他们当前正在处理的优先级任务、团队之间的沟通方式，甚至还包括人际关系等因素。
那么问题来了：你是否有足够的时间去等待，直到一切都能按预期运行，然后再向客户展示演示内容或交付最终成果呢？答案是否定的——你可能没有这样的时间。
在今天的这篇文章中，你会学到一些非常实用的技巧和方法，帮助你摆脱这些困境。你将了解到如何配置Chrome浏览器，以便即使在后端API返回错误数据或出现CORS错误的情况下，也能继续进行前端开发工作。
这份指南会一步步教你完成所有必要的配置设置，让你能够将其应用到自己的Web项目中。此外，这个教程还以视频形式提供在“调试思维”系列中。如果你感兴趣的话，可以去看一下：
现在，让我们开始讨论这些问题及其解决方法吧。
目录
问题1：后端返回的响应有误
这是一个典型的API响应错误案例，但您仍然需要继续进行前端开发工作。
请看下面的图片。您是否注意到有些地方不对劲？没错，在第一张卡片上，“Banana”这个单词的拼写似乎被错误地写成了“Banananana”。这个用户界面就是根据我们通过API获取到的数据构建而成的。
我们可以联系后端团队，要求他们尽快修复这个问题。但可能要等到下一次迭代开始时才能解决，而那可能是在15天后。
那么，我们该如何继续进行前端开发工作以及各种验证操作呢？其实我们可以利用Chrome浏览器的内容覆盖功能来解决这个问题。
如何使用内容覆盖功能
首先，按下F12键（在Mac上为Cmd+F12）打开Chrome浏览器的开发者工具。然后切换到“网络”标签页，查看那个返回错误响应的API请求。
接下来，右键点击该API请求，在弹出的菜单中选择覆盖内容选项。
您可能会疑惑：这里所说的“内容”指的是什么？我到底在覆盖什么呢？其实您是在覆盖API返回的响应数据，这样这些数据就能在本地用户界面上显示出来。
系统会弹出一个窗口，让您选择用于存储覆盖文件的文件夹。需要注意的是，所有被覆盖的内容都会被保存在您电脑的硬盘上。这意味着，在后端问题得到永久解决之前，您可以反复使用这些临时性的覆盖设置。
现在，请点击选择文件夹按钮。
系统会打开文件夹浏览器。您可以创建一个新的文件夹并选择它，或者选择一个现有的文件夹来保存这些覆盖文件。在我的例子中，我将这个文件夹命名为debug_devtools。
现在，Chrome开发者工具会请求您确认是否允许它编辑您本地系统中的文件。只需点击允许按钮即可。
设置就到这里结束了。现在，在开发者工具的源代码标签页下，您也会在可编辑模式下看到相同的显示内容。让我们仔细看看下面的图片：
-
本地覆盖设置位于开发者工具的
源代码 > 覆盖设置标签页下。 -
在左侧，
启用本地覆盖设置复选框已被选中，相应的覆盖内容会显示在下方。您可以看到之前创建的文件夹，在该文件夹中还会看到另一个名为localhost:3001的文件夹，以及其中的edibles文件。文件夹名“localhost:3001”与我们正在连接的API端点命名空间有关，而文件名“edibles”则与请求名称相对应。 -
在右侧，您可以在可编辑模式下查看这些内容（也就是对
edibles请求的响应结果）。
现在，您甚至可以通过导航到文件系统的debug_devtools文件夹来进一步验证这些内容。您应该会看到与在开发者工具中看到的相同文件夹和文件。
您可以打开edibles文件，其内容应该与之前看到的响应结果完全一致。
现在，您可以开始进行覆盖修改了。进入源代码标签页的可编辑响应区域，您可以直接修改其中的拼写错误。使用Ctrl + S（或Cmd + S）保存您的更改。
接下来，重新刷新浏览器页面，您应该会看到所做的修改已经反映在用户界面上。
太棒了！！现在，您可以将这个经过修改的响应结果（也就是edibles文件）分享给其他开发者，让他们也可以通过自己的Chrome开发者工具使用这些修改内容，从而在后端问题得到解决之前暂时应用这些本地调整方案。
问题2：在无需修改后端代码的情况下验证UI场景
假设你需要检查商品列表页面上某些商品的库存数量是否不足。如果某商品的库存量降至50件或更低，你就应该为该商品显示“库存不足”的提示标签。
那么，如果API返回的库存数量并非50件或更低怎么办呢？这时，“内容覆盖”功能就可以派上用场了！
你可以修改API响应结果，将库存数量设置为50件或更低，然后按照之前的步骤将这一变化反映到UI界面中。请看下面的示例：
-
我们修改了右侧面板中的库存数量信息。
-
保存并刷新页面后，不仅会在UI上看到更新后的库存数量，系统还会自动执行相应的JavaScript逻辑，从而显示“库存不足”的提示标签。这简直太方便了。
问题3：处理CORS错误
跨源资源共享（CORS）是一种浏览器安全机制，它允许Web服务器明确允许来自其他域名的请求。默认情况下，浏览器会禁止这些跨源请求，并遵循“同源资源共享”这一规则。
在很多情况下，你的API服务器和Web服务器可能位于不同的域名下。在这种情况下，当Web应用程序尝试访问API时，就会遇到CORS错误。
在服务器端，你需要进行相应的配置才能允许跨源请求。例如，你需要添加以下响应头信息：
Access-Control-Allow-Origin: http://localhost:5174
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: *
不过，需要注意的是，并不能保证服务器端总能及时解决CORS错误。但如果你因此而被阻止访问资源，那可就麻烦了。那么，有什么解决办法呢？答案就是：通过修改响应头信息来绕过这一限制。
打开Chrome开发者工具的网络选项卡，右键点击出现CORS错误的请求，然后从上下文菜单中选择“覆盖头部信息”选项。
顺便提一下，“覆盖内容”选项在这里是被禁用的。这是因为这个请求本身就出现了错误，因此没有返回任何内容。
点击覆盖请求头信息按钮，会进入请求头设置页面，在那里你可以添加额外的请求头信息。点击+ 添加请求头按钮，即可添加与CORS相关的请求头。
请逐一添加以下三个请求头及其对应的值：
Access-Control-Allow-Origin: http://localhost:5174
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: *
每个请求头都有其重要的用途：
-
Access-Control-Allow-Origin请求头用于指定哪些来源域名可以被允许向服务器发送跨源请求。在这个例子中，该字段的值为http://localhost:5174，因为我们的应用程序是基于Vite框架开发的ReactJS应用。 -
Access-Control-Allow-Methods请求头用于指定来自特定来源域名的请求可以使用哪些HTTP方法。在这里，我们只允许使用GET方法。 -
Access-Control-Allow-Headers请求头用于指定在跨源请求过程中哪些HTTP请求头是可以被安全使用的。
好了，现在把这些请求头都添加进去并保存吧。
与覆盖内容一样，覆盖请求头信息也会在服务器域名对应的目录下生成一个名为.headers的文件。由于该文件的名称以点号开头，因此大多数操作系统会将其视为隐藏文件。所以请确保通过操作系统的设置来查看这些隐藏文件，才能看到这个文件。
一旦你打开了这个文件，就会看到通过覆盖设置添加到的所有请求头信息。
现在，重新刷新浏览器，然后尝试再次执行之前会导致CORS错误的操作。哇，错误已经消失了！你应该能够看到请求成功执行的结果，以及服务器返回的响应数据。
想象一下，只要服务器端代码中没有任何一行被修改，你就能继续进行客户端用户界面的开发工作了。这真是太棒了，不是吗？
其他小贴士
在结束之前，让我们再学习一些实用的小技巧吧。
全局应用覆盖设置
我们之前只是对/user这个API端点应用了与CORS错误相关的头部信息覆盖设置。那么，如果你也需要在其他端点上应用相同的覆盖设置，可以按照以下步骤轻松完成：
-
进入
源代码选项卡。 -
选择
覆盖设置子选项卡。 -
点击
.headers这一项进行覆盖设置。 -
在右侧面板中，将
应用范围的值改为*。
这样就可以了。现在，相同的响应头部信息将会被应用于所有端点。
禁用或删除覆盖设置
有时，你可能想要禁用或删除这些覆盖设置。如果只是想禁用它们而不删除，只需取消选中启用本地覆盖设置复选框即可。如果要永久删除所有覆盖设置，可以点击右上角的停止图标；另外，如果你想选择性地删除某个覆盖设置，也可以右键点击该设置然后进行删除。
通过“调试思维模式”了解更多
如果你喜欢这份以实例为引导的实用指南，那么你一定会喜欢我来自调试思维模式系列的其他与调试相关的内容。请去看看吧。
在结束之前……
就这些了！希望你对这些内容有所收获。
让我们保持联系吧：
-
订阅我的YouTube频道吧。
-
看看我的课程：40天JavaScript学习之旅和15天React设计模式教程。
-
如果你不想错过每日更新的技能提升建议，可以关注我的LinkedIn账号。
-
加入我的Discord服务器，一起学习吧。
-
也可以在GitHub上关注我的工作进展。
<期待在下一篇文章中与大家再见。在此之前，请照顾好自己，继续努力学习吧。>