Shopify主题应用扩展调用后端API遇CORS拦截问题排查

云上老周

2026-8-1

Shopify主题应用扩展CORS错误排查与解决

移除前端请求中的无效请求头
前端fetch里添加的Access-Control-Allow-Origin是后端返回给前端的响应头，前端请求时携带它毫无意义，反而可能干扰请求逻辑。修改后的fetch代码：

fetch('https://someOtherNR.eu.ngrok.io/api/test?shop=myshopname.myshopify.com&host=someNr', {
  mode: "cors",
  method: "GET"
}).then(function (response) {
  console.log('success!', response);
}).catch(function (err) {
  console.warn('Something went wrong.', err);
});

修正请求URL的格式错误
从报错信息的URL能看到：https://04eb-2a02-810d-e80-d840-9881-bdd5-5357-265b.eu.ngrok.io/?shop=...&host=c2hvcGFibGUtc3RyZWFtLm15c2hvcGlmeS5jb20vYWRtaW4/api/test，这里host参数值里包含了/api/test，导致实际请求的后端路径是根路径/，而非你期望的/api/test。
正确的URL应该把/api/test放在查询参数之前，比如：https://xxx.eu.ngrok.io/api/test?shop=xxx&host=xxx，确保后端的/api/test路由能被正确命中，CORS配置才会生效。
确认后端CORS中间件的挂载顺序
必须保证app.use(cors({ origin: '*' }))在所有路由定义之前挂载。如果路由定义在CORS中间件之前，这些路由不会应用CORS配置，自然不会返回Access-Control-Allow-Origin头。示例正确顺序：
```
const cors = require('cors');
const express = require('express');
const app = express();

// 先挂载CORS中间件
app.use(cors({ origin: '*' }));

// 再定义业务路由
app.get('/api/test', (req, res) => {
  res.send('Test response');
});

app.listen(3000);
```
验证后端是否返回CORS头
用Postman或curl直接请求后端/api/test接口，检查响应头里是否包含Access-Control-Allow-Origin: *。如果没有，说明CORS配置未生效，需要检查：是否安装了cors依赖（执行npm install cors）、是否有其他安全中间件覆盖了CORS设置。