在前端使用 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