从 Bigcommerce API 获取的简单反应应用程序

Posted 2023-02-27

【中文标题】从 Bigcommerce API 获取的简单反应应用程序

【英文标题】：simple react app with fetch from Bigcommerce API

【发布时间】：2022-01-16 21:53:21

【问题描述】：

我对反应比较陌生，想创建一个使用 Bigcommerce API 来更改用户通过表单提交的产品数据的应用。例如，我的想法是为用户提供一个简单的表单来输入数量。用户提交想要更改的数量后，新数字将反映在 Bigcommerce 管理页面的产品页面上。

我已经用 Node 创建了相同类型的应用程序，但没有前端。我制作的应用程序读取一个 csv 文件并调用适当的 API 来更新它们的数量。我想创建一种相同的应用程序，但在没有 csv 读取能力的 React 中。由于某种原因，我现在遇到了 CORS 错误的问题。我尝试使用 Node 为这个 React 应用程序创建一个后端，但我仍然遇到同样的错误。

我尝试了其他一些 API。一个不需要身份验证并且工作正常的。当我执行 console.log(data) 时，我能够看到结果。

这个 Bigcommerce API 似乎无法工作，因为它需要身份验证，我已经在他们的后端进行了多次验证，以仔细检查我的工作。我很困惑，不相信 React 应用程序无法使用凭据从远程服务器获取数据。

【问题讨论】：

这能回答你的问题吗？ Node.js CORS error

并非如此。我已经看过这个帖子了。我尝试使用不需要身份验证的 API，它仅适用于 react 应用程序。但是当我将调用更改为需要身份验证且我有凭据的 API 时，由于某种原因，我无法使其工作。

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案1】：

我想通了，但我仍然相信我可以只使用 React 中的前端应用程序来做到这一点。但是，没有节点。

我所做的是使用 Node 作为后端使用 Express 创建一个端点。安装 cors 模块，然后允许来自前端 URL 地址的请求。另外，请注意您使用的是 localhost:PORT# 还是 127.0.0.1:PORT#

对于浏览器来说，这些是不同的。确保打开浏览器时它们是相同的。

【讨论】：

为了更改产品数量，您将使用 BigCommerce 管理 API。虽然在技术上可以直接从浏览器中的 React UI 进行身份验证和使用该 API，但您将暴露您的秘密访问令牌。因此，除非 React 应用程序是受信任用户的安全内部应用程序，否则使用自己的 Node API 的策略是正确的方法。 ☕️