避免本地主机上的 CORS 错误（2020 年）

1. 在 Create React App 中使用代理设置

2. 在浏览器中禁用 CORS

3. 使用代理服务器避免 CORS 错误

在本地主机上开发网站/Web应用程序，并向其他服务器发出请求时，您可能会遇到跨域资源共享 (CORS) 问题。本文不会详细介绍 CORS 的具体内容。我只想说，CORS 的存在是为了安全，但在本地开发时却会非常麻烦！您可以在MDN 文档中了解更多关于 CORS 的信息。

我编写了这篇简单的指南，旨在解释禁用本地主机上的跨域限制的主要解决方案（从而在本地开发应用程序时修复任何 CORS 错误），我将在下面进行更详细的解释。

1. 在 Create React App 中使用代理设置

Create React App 提供了一个配置选项，允许你在开发环境中轻松代理 API 请求。该选项位于 package.json 文件中react-scripts@0.2.3。要启用此功能，请像这样将代理设置添加到你的 package.json 文件中。

 

"proxy": "https://cat-fact.herokuapp.com/",

现在，当您向https://localhost:3000/api/facts发出 API 请求时，Create React App 会将 API 请求代理到https://cat-fact.herokuapp.com/facts，从而解决 CORS 错误。 

这是一个非常简单的解决方案，但对于涉及多个 API 或需要某些类型的 API 身份验证的更复杂情况，可能无法正常工作。

2. 在浏览器中禁用 CORS

您可以直接在浏览器中禁用 CORS。但请注意，这样做会禁用一些安全限制，而这些限制的存在是有原因的。我不建议在禁用 CORS 的情况下浏览网页；只需在开发网站/应用时禁用即可。

铬合金：

在 Mac 版最新 Chrome 浏览器中禁用 CORS 的最可靠方法（已在 v84 版本上测试）是禁用 Web 安全功能后再运行 Chrome 浏览器。

1. 强制退出 Chrome 的方法是：进入 Mac 菜单并按“强制退出”（或按 Command Q）。
2. 然后运行此命令以禁用 Web 安全功能打开 Chrome 浏览器。

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome — args — user-data-dir=”/tmp/chrome_dev_test” — disable-web-security

开发完成后，重启 Chrome 浏览器即可恢复正常。

火狐浏览器：

在 Firefox 中禁用 CORS 最简单、最可靠的方法是安装CORS Everywhere 插件。

Safari：

在 Safari 中禁用 CORS 的最简单、最可靠的方法是在“开发”菜单中禁用 CORS。

1. 进入“首选项”>“高级”即可启用“开发”菜单。
2. 然后从开发菜单中选择“禁用跨域限制” 。

开发完成后，重启 Safari 浏览器即可恢复正常。

3. 使用代理服务器避免 CORS 错误

或者，您可以使用像 cors-anywhere 这样的代理。
如果您想轻松体验 cors-anywhere，Rob — W已经搭建了一个公开演示，非常适合使用公共 API，因为它无需注册或配置：https://cors-anywhere.herokuapp.com。由于这只是一个演示，请求数量有限。

要使用 cors-anywhere 的公开演示，只需在域名后添加要发送请求的 URL，例如https://cors-anywhere.herokuapp.com/https://cat-fact.herokuapp.com/facts（*如果您在浏览器中查看此 URL，可能会收到缺少请求头的错误。当您在应用程序中使用 Axios 或 Fetch 等工具发出 API 请求时，则不会出现此问题）。

如果您觉得这篇文章有用，有任何疑问，或者想了解更多类似内容，欢迎在推特上关注我！