从使用 CRA 创建的 Firebase 托管的 React 应用程序访问外部 API

Question

我有一个托管在 Firebase 上的 React 应用程序（CRA），我正在尝试访问外部 Rest API（使用 javascript 的 fetch()），但由于该 API 与 web-app 不在同一个域中，所以它引发“CORS”错误。 API 的标头 Access-Control-Allow-Origin 为 * 。 我可以在开发模式下使用package.json 中的代理解决此问题，但在托管应用程序后似乎没有任何效果。

尝试了以下方法

• 更新了 Firebase.json 以包含标题
• no-cors 模式同时使用 fetch()

Answer 1

正确的 CORS 标头是 Access-Control-Allow-Origin，而不是 Access-Control-Origin。此外，根据请求的性质，您可能需要 preflight request 并且可能无法使用 * 作为来源。

您无法在客户端绕过 CORS - 它被明确设计为一种浏览器安全机制，以防止意外的跨域请求。如果您可以控制 API 服务器，则应该能够解决此问题。如果不这样做，您可能需要使用 Cloud Function 将请求代理到外部 API。