SPA 调用 CORS 禁用的 api答案

【问题标题】：SPA call CORS disabled api'sSPA 调用 CORS 禁用的 api
【发布时间】：2019-07-23 06:51:36
【问题描述】：

我正在创建一个供个人使用的 SPA。我想在一页上显示我的日历和许多其他内容。

我有一个基于 nodejs 的服务器，它创建了一个基于反应的 SPA。所有不同的 React 组件都希望从不同的来源获取它们的内容并相互独立地更新。

问题：调用 CORS 禁用 api 之类的谷歌日历将始终拒绝来自不同来源的请求。

目前我正在为每个组件创建一个微服务作为代理。但是大多数组件都很小，它们也可以在内部做出反应。

对此有任何解决方法吗？例如，我可以使用 openvpn 来欺骗我的来源吗？

【问题讨论】：

你不能将你的来源欺骗到浏览器——这是唯一重要的地方，你的来源是什么。浏览器知道您的前端代码运行的实际来源，并且您不能欺骗浏览器认为您的代码在其实际来源之外的某个来源运行。
来源是引用网站，而不是浏览器的位置。浏览器允许您读取来源但不能更改它（出于安全目的）。我尝试使用 javascript xmlhttprequest 访问一些 rss 提要，但也遇到了 CORS 问题。因此，无论您如何创建它们，您都将需要这些微服务。我没有尝试使用工人。由资源提供者决定允许哪些来源。
服务器端指令来管理它https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
@Tuckbros “workers”是指代理请求的微服务，对吧？
是的，只有客户端 JavaScript。有了“共享”的能力，我认为有办法。但似乎不是。 developer.mozilla.org/en-US/docs/Web/API/SharedWorker 注意：如果可以从多个浏览上下文访问 SharedWorker，则所有这些浏览上下文必须共享完全相同的来源（相同的协议、主机和端口）。

【解决方案1】：

使用proxy，那么您不必担心cors 问题，因为代理会发出请求。

您可以通过yarn add create react-app project-name 与CRA v2 合作

而CRA v2 webpack dev server 支持proxy。

在 package.json 文件中，添加"proxy": "https://domainName.com"

并随心所欲地调用 API。

例如，如果你想对https://domaiName.com/something进行API调用

只需向'/something' 提出请求，因为我们已经修复了代理网址

如果您不使用 CRA，您可以自己制作代理，但我强烈建议您使用它并自定义您的项目

希望对你有帮助。

【讨论】：

不要认为它适用于我。如果我想调用两个不同的 api 怎么办？例如谷歌日历和gmail？如果所有呼叫都转到一个域，就不能这样做，对吗？
@hasdrubal 这不是问题。使用 http-proxy-middleware，阅读 medium.com/@Pavan_/… 以及 github.com/facebook/create-react-app/pull/1790 会有所帮助。
那么我认为这是迄今为止提供的最简单的解决方案。