在本地开发请求另一台服务器的网站/网页应用程序时，你可能会遇到跨源资源共享（CORS）问题。本文不会详细介绍CORS是什么，我只想说CORS存在是为了安全考虑，但是在本地开发时，它可能会带来麻烦！你可以在MDN文档上阅读更多关于CORS的内容。

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

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

Create React App具有一种配置设置，允许你在开发中简单地代理API请求。这在react-scripts@0.2.3中可用。要做到这一点，请像这样将代理设置添加到你的package.json中

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

现在，当你向<a class="af mc" href="https://localhost:3000/api/facts" rel="noopener ugc nofollow" target="_blank">https://localhost:3000/api/facts</a>发出API请求时，Create React App将代理API请求到<a class="af mc" href="https://cat-fact.herokuapp.com/facts" rel="noopener ugc nofollow" target="_blank">https://cat-fact.herokuapp.com/facts</a>，并且CORS错误将得到解决。

这是一个非常简单的解决方案，可能无法处理更复杂的情况，例如涉及多个API或需要某些类型的API身份验证的情况。

2. 在浏览器中禁用CORS

你可以直接在浏览器中禁用CORS。如果你这样做，请注意，你正在禁用出于某种原因而存在的安全限制。我不建议禁用CORS浏览网页；只在开发网站/应用程序时禁用它。

Chrome（在Mac上）：

在最新版本的Chrome上（在v84上测试过），禁用CORS的最可靠方法是在禁用Web安全的情况下运行它。

• 强制退出Chrome，方法是进入mac菜单并按“强制退出”（或按command Q）。
• 然后运行此命令以禁用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：**

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

## **Safari：**

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

- 通过进入“偏好设置”>“高级”来**启用开发菜单**。
- 然后从**开发菜单**中选择“**禁用跨源限制**”。
_完成开发后，重新启动Safari即可回到正常状态。_

# 3. 使用代理避免CORS错误

最后，你可以使用像[cors-anywhere](https://www.npmjs.com/package/cors-anywhere)这样的代理。

如果你想轻松演示cors-anywhere，[Rob-W](https://github.com/Rob--W)已经设置了一个[公共演示](https://github.com/Rob--W/cors-anywhere#demo-server)，它非常适合消耗公共API，因为它不需要注册或配置[https://cors-anywhere.herokuapp.com](https://cors-anywhere.herokuapp.com/)。_因为它只是一个演示，所以请求是有限制的。_

要使用cors-anywhere的公共演示，请在域名后添加你要进行请求的URL，例如[https://cors-anywhere.herokuapp.com/https://cat-fact.herokuapp.com/facts](https://cors-anywhere.herokuapp.com/https://cat-fact.herokuapp.com/facts)（*如果你在浏览器中查看此内容，你可能会收到有关缺少请求标头的错误。使用Axios或Fetch之类的内容在你的应用程序中进行API请求时，这不会成为问题）。

_如果你发现这很有用，有任何问题或需要更多类似内容，请随时_ [_关注我在twitter上_](https://twitter.com/AndyPotts_)_！_