如何通过fetch传递Shopify API密钥和密码获取订单等接口数据

不可以直接在前端页面通过fetch传递API密钥与密码调用Shopify REST Admin API获取订单、商品等数据，你的写法不仅会触发报错，还存在极高的安全风险 #

核心原因 #

• 安全隐患：前端JavaScript代码对所有访问店铺的用户公开，你硬编码在代码里的API Key和密码可以被任何人轻易扒取，恶意人员拿到凭证后可以直接篡改店铺数据、导出客户隐私信息、删除商品/订单，会给你的店铺造成不可逆的损失。
• 跨域限制：Shopify Admin API本身不支持浏览器端跨域调用，浏览器同源策略会直接拦截响应结果。你代码里设置mode: 'no-cors'只会得到无法读取内容的不透明响应，根本拿不到接口返回的JSON数据；另外你在请求头里加Access-Control-Allow-Origin: '*'是完全错误的，这个头是服务端返回给客户端的响应头，请求携带不会产生任何作用。
• 鉴权逻辑错误：你当前用的Basic Auth鉴权方式现在已经不被Shopify Admin API推荐使用，就算是后端调用也建议使用私有应用访问令牌或者OAuth2生成的访问令牌。

正确实现方案 #

所有Shopify Admin API的调用必须放在后端服务处理，不要暴露任何凭证到前端：

1. 自行搭建后端服务（可以用Node.js、PHP、Python等任意后端语言），将API密钥、密码存储在后端的环境变量中，永远不对外暴露。
2. 前端需要获取订单、商品数据时，先请求你自己的后端接口。
3. 后端接收到前端请求后，携带API凭证请求Shopify官方接口获取数据，处理后再返回给前端。
4. 你可以给自有接口增加鉴权逻辑，避免被恶意调用。

现有代码的其他可优化点 #

参数拼接逻辑冗余，不需要写多层if判断拼接参数，可以直接用URLSearchParams统一处理，代码更简洁不易出错：

const params = new URLSearchParams()
if (limit) params.append('limit', limit)
if (fromDate) params.append('created_at_min', fromDate)
if (toDate) params.append('created_at_max', toDate)
const apiRequest = `${store_url}${apiOrderVersion}?${params.toString()}`

另外fetch配置存在大量无效/错误项：withCredentials、crossdomain、agent都不是fetch的标准配置项，credentials: 'same-origin'和跨域请求逻辑冲突，这些配置都可以直接删除。

内容的提问来源于stack exchange，提问作者Stefan Momcilovic