在前端使用 Shopify API答案

【问题标题】：Using the Shopify API in the Front-End在前端使用 Shopify API
【发布时间】：2017-08-06 12:32:34
【问题描述】：

我正在构建一个用 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”标头。因此，Origin 'http://localhost:3000' 不允许访问。响应的 HTTP 状态代码为 401。

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

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

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

【问题讨论】：

那个端点支持 jsonp 吗？
我现在就去 Shopify。

标签： javascript node.js api shopify

【解决方案1】：

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

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

【讨论】：

别管 CORS 问题。考虑从面向公众的代码访问 API 是一个糟糕的想法，因为它会将您的 API 秘密暴露给世界。要完成任何 API 恶作剧，请安装一个应用程序，然后使用内置的安全应用程序代理模式来代理您的前端调用。
谢谢大卫！我实际上并没有向公众公开任何 API 机密，因为它们是在 .env 文件中定义的——本地主机以及实时服务器上。这就是为什么我认为通过前端可能是可行的。
嗨@DavidLazar，你能提供一个网页链接来展示这是如何完成的吗？