Shopify Admin API调用出现401 Unauthorized错误，求解决指导

问题核心原因 #

你的代码里设置了mode: 'no-cors'，这是导致401的关键：

• 浏览器在no-cors模式下会屏蔽自定义请求头（包括X-Shopify-Access-Token），Shopify无法接收到Token进行验证，因此返回未授权。
• Postman是独立客户端工具，不受浏览器CORS规则限制，所以能正常传递Token并请求成功。

具体修复步骤 #

1. 移除mode: 'no-cors'配置
   删掉这一行，让浏览器以默认的cors模式发起请求，确保自定义头能正常传递。

2. 补充Content-Type请求头
   GraphQL请求必须指定Content-Type: application/json，Postman会自动添加，但你的代码里遗漏了这一项，需要补上。

3. 验证Access Token有效性

   • 确认Token拥有对应API的权限（比如staged_uploads相关权限）。
   • 检查Token是否过期、店铺域名是否与请求地址一致。

4. 处理跨域问题
   Shopify Admin API默认不允许前端直接跨域请求，若你是在前端页面调用API，需要：

   • 通过后端代理转发请求，由后端携带Token调用Shopify API，前端再请求自己的后端接口。
   • 若开发的是Shopify应用，使用Shopify官方的App Bridge或Embedded App框架，利用内置的请求方式避免跨域。

修正后的代码示例 #

fetch('https://mystore.myshopify.com/admin/api/2023-10/graphql.json', {
  method: 'POST',
  headers: {
    'X-Shopify-Access-Token': accessToken,
    'Content-Type': 'application/json' // 新增必填请求头
  },
  body: JSON.stringify({"query": stagedUploadsQuery,"variables": stagedUploadsVariables})
})
.then(response => {
  console.log('Full response:', response); // 调整顺序，先打印响应再抛错
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return response.json();
})
.then(data => {
  console.log('Staged Upload Query Result:', data);
})
.catch(error => {
  console.error('Error during the fetch:', error);
});

内容的提问来源于stack exchange，提问作者MA-2016