Shopify Remix应用：前端传Customer ID到自定义端点遇404问题求助

我正在用Remix开发Shopify自定义应用，尝试把当前Customer ID发送到Remix定义的API端点时碰到了404错误，想确认是否可以从前端向Shopify自定义应用的端点发送Customer ID。

前端请求代码 #

async function sendCustomerIdToBackend(customerId) {
    try {
      const response = await fetch('/api/customer-id', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ customerId }),
      });

      if (!response.ok) {
        const errorData = await response.json();
        console.error('Error:', errorData);
      } else {
        const data = await response.json();
        console.log('Response from backend:', data);
      }
    } catch (error) {
      console.error('Fetch Error:', error);
    }
  }

  // 示例调用
  sendCustomerIdToBackend(4242424242);

后端路由代码（routes/api/customer-id.jsx） #

import { json } from "@remix-run/node";

export const action = async ({ request }) => {
  const { customerId } = await request.json();

  if (!customerId) {
    return json({ error: "Customer ID是必填项" }, { status: 400 });
  }

  return json({ message: `已收到Customer ID: ${customerId}` });
};

排查404错误的核心要点 #

• 验证路由路径匹配：Remix的路由完全对应routes目录结构，你的文件路径routes/api/customer-id.jsx对应端点/api/customer-id，前端路径是对的，但要注意部署后的应用根路径——如果Shopify应用挂载在子路径下，需用绝对路径请求，比如window.location.origin + '/api/customer-id'。
• 检查路由冲突：确认routes目录下没有其他同名文件或动态路由（如api/$id.jsx）覆盖了这个端点，导致请求被错误路由。
• CORS配置检查：如果应用是独立前端而非嵌入Shopify后台，需在Remix中配置CORS允许Shopify域名的请求，可通过自定义中间件或修改entry.server.jsx实现。
• 确认请求方法匹配：Remix的action函数仅处理POST/PUT/DELETE等非GET请求，你的前端用POST是正确的，若误用GET会触发loader函数（此处未定义），也会返回404。

关于前端传递Customer ID的可行性 #

完全可以从前端向Shopify自定义应用的Remix端点发送Customer ID，但需注意两个关键点：

• 验证ID真实性：后端要通过Shopify API验证该Customer ID属于当前会话用户，防止前端篡改数据。
• 明确ID来源：如果是Shopify Admin嵌入应用，当前登录的是店铺管理员，需明确传递的是指定顾客的ID，避免混淆管理员身份和顾客身份。

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