Shopify Checkout UI扩展使用Fetch API+应用代理遭遇CORS问题

问题核心分析 #

你遇到的CORS错误本质是后端未正确返回Access-Control-Allow-Origin响应头，结合代码来看存在两个关键问题：后端CORS配置未生效，前端请求头设置错误。

修复步骤 #

1. 修正后端CORS中间件配置

你定义了corsOptions但未将其传入cors()中间件，导致自定义配置完全无效，使用了默认CORS规则。修改如下：

import cors from "cors"; 
const corsOptions = { 
  exposedHeaders: 'x-auth', 
  origin: 'https://cdn.shopify.com', // 直接指定Shopify扩展运行的域名，比*更安全合规
  methods: ['GET', 'OPTIONS'], // 明确允许预检请求和实际请求的方法
  allowedHeaders: ['Content-Type', 'Accept'] // 仅允许前端实际发送的请求头
} 
app.use(cors(corsOptions)); // 必须传入配置对象才能让自定义规则生效

如果你的API需要支持带凭证的请求（如Cookie），origin不能设为*，必须指定具体域名，这里https://cdn.shopify.com是Shopify Checkout UI扩展的运行源，直接配置即可。

2. 删除前端错误的请求头

Access-Control-Allow-Origin是后端返回给浏览器的响应头，不是前端需要发送的请求头，前端添加这个头完全无效，反而可能干扰浏览器的CORS校验，直接删除：

const sendOtpHandler = async () =>{
  try {
    const response = await fetch(`https://${shop.name}.myshopify.com/apps/express-proxy/shoppers`, {
      method: 'GET', 
      headers: { 
        'Content-Type': 'application/json', 
        'Accept': 'application/json' 
      }, 
    });
    const data = await response.json();
    console.log('getOTP', data);
  } catch (error) {
    console.error(error);
  }
}

同时建议统一使用async/await + try/catch写法，避免async函数内混用then/catch导致的逻辑混乱。

3. Shopify场景额外检查

• 确认你的express-proxy路由配置正确，Shopify App Proxy的路由需要在Shopify后台配置对应路径，避免404导致的CORS误报
• 检查后端是否有其他中间件（如安全拦截、路由前缀）覆盖了CORS响应头
• 如果是Shopify Plus店铺，确认店铺的CSP策略没有限制跨域请求

内容的提问来源于stack exchange，提问作者Ranjana Sawarkar