浏览器请求 Storefront API 报 CORS 被拦截怎么查
现象#
本地 fetch 时控制台报 blocked by CORS policy: No 'Access-Control-Allow-Origin' header,Network 里只有一个失败的 OPTIONS 或 401,同样的请求放到 Postman 却能成功。
原因#
- 请求打到了 /admin/api/.../graphql.json,Admin 端点不面向浏览器跨域使用
- 通过自建反代或 Worker 转发,响应丢了 Access-Control-Allow-Origin 与 Allow-Headers
- 请求带了 credentials: include,而响应是通配来源,浏览器会直接拒绝
- 失败的 401 响应本身没有 CORS 头,真正的鉴权错误被浏览器遮住,看起来像跨域
处理步骤#
- 在 Network 里看请求 URL,确认是
https://{shop}.myshopify.com/api/2026-07/graphql.json - 展开 OPTIONS 预检,确认状态码以及 allow-headers 是否包含令牌头
- 去掉
credentials: 'include',Storefront 用 token 鉴权,不需要携带 cookie - 若走自建代理,在响应里补
Access-Control-Allow-Origin与 Allow-Headers - 先用 curl 复现同一请求,拿到真实状态码后再回浏览器验证
验收标准#
Network 里 OPTIONS 返回 2xx 且带 CORS 头,POST 返回 200,Console 能读到 data 而不是 CORS 报错。
本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。