创建 React 应用程序允许访问控制起源问题答案

【问题标题】：Create React App Allow Access Control Origin Issue创建 React 应用程序允许访问控制起源问题
【发布时间】：2018-06-10 10:56:50
【问题描述】：

我部署了一个使用 create-react-app 创建的天气应用。在开发中，我会使用 chrome 扩展允许访问控制来源。现在它与 github 页面一起部署，我得到了错误：

请求中没有“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“https://boka44.github.io” 使用权。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 CORS 的资源。

似乎我需要向我的服务器添加一个标头，但我对如何以及在何处添加它感到困惑。

任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

Dark Sky API docs 表示它不允许 CORS。所以你不能从他们的服务器获取数据到你的客户端代码。因此，在 PHP 或其他一些平台中创建一个proxy server，它将进行 api 调用并生成 JSON 格式的响应。

【讨论】：

【解决方案2】：

您调用的 API 端点（提供天气信息的端点）已禁用 CORS，这意味着您永远无法进行面向客户端的调用（即通过浏览器），因为浏览器会阻止调用。

你有两个选择：

如果您可以更改 API 端点：您可以添加 CORS 标头以允许来自客户端应用的域。
如果您无法更改服务器代码：创建您自己的 API 端点来调用原始 API 端点，并让您的客户端应用程序调用您自己的 API。（即，您只需创建一个代理服务器，将您的调用定向到原始 API 端点）。在这种情况下，您可以在服务器上指定 CORS 标头以仅允许来自您的客户端应用程序域的调用。

【讨论】：

这就是我的部分问题所在。我不知道怎么做。我在 package.json 中添加了一个代理服务器，但不知道如何设置它。也不确定在哪里或如何添加 CORS 标头。这个有点菜鸟，我找不到很好的文档。
您需要创建一个服务器，您可以使用 Azure、AWS 或 GCP 它们都提供免费层级。只需创建一个调用 API 端点的 nodejs 服务器。在您的客户端应用程序中，您将调用刚刚创建的服务器。有关在 Azure 上创建简单 nodejs 服务器的教程，请参阅 docs.microsoft.com/en-us/azure/cloud-services/…