在前端使用 Shopify API

Question

我正在构建一个用 Javascript 构建的独立 Web 应用程序（具体来说是 React + Redux）。 我使用 Shopify Buy SDK从我的 Shopify 商店中提取数据取得了巨大成功。 但是，因为我需要使用 [ main Shopify API][2] 来添加 Buy SDK 不支持的产品和其他高级功能。

我可以从服务器端成功连接到 Shopify API（使用 NodeJS），但是当我尝试在前端进行相同的连接时（我当然通过我的 .env 环境变量检索应用程序密钥和秘密令牌以确保安全原因）：

axios.get('https://<app-key>:<app-password>@rmc-preview.myshopify.com/admin/orders.json').then((data) => {
  console.log('data: ', data);
});

，然后我收到“Access-Control-Allow-Origin”错误：

XMLHttpRequest 无法加载https://rmc-preview.myshopify.com/admin/orders.json 。 请求的资源上不存在“Access-Control-Allow-Origin”标头。 因此，不允许访问源“ http://localhost:3000 ”。 响应具有 HTTP 状态代码 401。

我想通过我的本地主机和我的公共站点（目前通过 Netlify 托管）进行连接。

我需要通过服务器端连接这个 API，还是完全可以通过前端连接？

感谢您的任何提示或建议。

Answer 1

您不能在 Shopify 前端为所有安全问题调用这样的东西。 CORS 之类的。 您需要通过可以利用 API 的后端应用程序来路由请求。

Node.js 是您正在寻找的东西。

Answer 2

即使您的密钥在 .env 中，它们也会被打包并在前端打开。 你需要走服务器 API 路由https://youtu.be/FcwfjMebjTU