如何为Shopify应用设置代理URL？调用接口遇404问题排查

我需要设置应用代理来请求Heroku上的Postgres数据库及应用扩展，但一直因URI错误收到404响应，不清楚正确配置方式。核心需求是通过前端调用API，向Heroku上的Postgres数据库提交数据。

尝试通过useFetch钩子发起请求（代码位于merchant.tsx），但返回404响应；当前应用代理配置已设置；后端merchant.ts中的端点未被触发。请问如何正确调用代理URL来访问我的接口？后端路由配置涉及index.ts与merchant.ts代码。

1. 校验代理配置 #

• 确认代理目标地址指向Heroku后端应用域名（而非Postgres数据库直连地址，前端无法直接访问数据库），格式应为https://[your-heroku-app-name].herokuapp.com
• 检查路径匹配规则：若前端请求路径为/api/merchant，代理需将该路径转发到后端对应端点，避免路径重写错误（比如不要把/api转发到后端根路径，除非后端路由确实如此定义）
• 确保代理配置无多余前缀或路径拼写错误

2. 修正前端请求路径 #

• 前端使用useFetch时，需用相对路径发起请求，而非完整域名，这样代理才能拦截并转发请求。示例代码：

// merchant.tsx 中的请求示例
const { data, error } = useFetch('/api/merchant', {
  method: 'POST',
  body: JSON.stringify(yourSubmitData),
  headers: { 'Content-Type': 'application/json' }
});

3. 确认后端路由配置 #

• 检查index.ts是否正确挂载merchant路由：

// index.ts
import merchantRouter from './merchant';
// 确保路由前缀与前端请求路径匹配
app.use('/api/merchant', merchantRouter);

• 检查merchant.ts中的端点定义是否匹配请求方法和路径：

// merchant.ts
router.post('/', async (req, res) => {
  // 处理Postgres数据提交逻辑
  try {
    // 数据库操作代码
    res.status(201).json({ message: '数据提交成功' });
  } catch (err) {
    res.status(500).json({ error: '提交失败' });
  }
});

• 先直接测试后端端点：在浏览器或Postman中访问https://[your-heroku-app-name].herokuapp.com/api/merchant（POST方法），确认后端能正常响应，排除后端自身故障

4. 调试请求流程 #

• 打开浏览器开发者工具的Network标签，查看请求的实际URL、请求头和响应详情，确认请求是否被代理正确转发
• 查看Heroku控制台日志，确认是否有请求到达后端：若无请求记录，说明代理配置或前端请求路径有误；若有请求但返回404，说明后端路由配置不匹配

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