Shopify应用Express框架Webhook连接404问题求助

Hey there! I’ve dealt with this exact frustrating 404 issue when setting up Shopify webhooks before, so let’s break down the most likely fixes step by step:

1. Double-Check Your Router Mounting Path #

First off, make sure your Express router is mounted correctly in your main app file (like app.js). If you added a prefix when mounting the router—for example:

// app.js
const webhookRouter = require('./routes/webhooks');
app.use('/api', webhookRouter); // Notice the '/api' prefix

Then the actual endpoint Shopify needs to hit is https://your-domain.com/api/webhooks/orders/create, not just /webhooks/orders/create. If you set the Shopify webhook URL without that prefix, it’ll throw a 404 because the route doesn’t exist at the path Shopify is targeting.

If you didn’t use a prefix, confirm you’re mounting the router with app.use(webhookRouter) (no extra path) so the /webhooks/orders/create route is directly accessible.

2. Fix Body Parsing Middleware for Webhooks #

Shopify webhooks require access to the raw, unparsed request body for signature verification—and using standard express.json() or express.urlencoded() middleware can interfere with both route matching and future signature checks.

Add a raw body parser specifically for your webhook path before mounting your router:

// app.js
app.use('/webhooks/orders/create', express.raw({ type: 'application/json' }));
// Now mount your router
app.use(webhookRouter);

This ensures the request reaches your route without being prematurely parsed, which can sometimes cause unexpected routing issues.

3. Verify the Shopify Webhook URL is 100% Correct #

It sounds obvious, but tiny typos are the #1 culprit here:

• Double-check the full URL in Shopify’s webhook settings matches your public server address + exact route path (e.g., https://my-shopify-app.com/webhooks/orders/create).
• Watch for misspellings like order instead of orders, or created instead of create.
• If you’re testing locally with a tool like ngrok, make sure you’re using the latest ngrok URL (it changes every time you restart the tool!).

4. Check Reverse Proxy/Port Forwarding Configs #

If you’re using a reverse proxy (like Nginx) or port forwarding:

• Ensure your proxy is forwarding requests to your Express app’s port without modifying the URL path. For example, an Nginx config for /webhooks should look like this:

  location /webhooks {
    proxy_pass http://localhost:3000; # Match your Express port
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
  

• If your Express app runs on a non-standard port (like 3000), make sure your public domain is correctly routing traffic to that port (or use a proxy to handle 80/443 traffic).

5. Test the Route Locally First #

Use a tool like Postman or curl to send a POST request to your endpoint (e.g., http://localhost:3000/webhooks/orders/create if testing locally). If you get a 404 here too, the problem is definitely in your Express route setup—not Shopify. This helps narrow down the issue quickly.

Bonus: Add Signature Verification (Once 404 is Fixed) #

Once you get the route working, don’t forget to add Shopify’s webhook signature verification to secure your endpoint. Here’s how to update your route handler:

const crypto = require('crypto');

router.post('/webhooks/orders/create', (req, res) => {
  const hmac = req.headers['x-shopify-hmac-sha256'];
  const shopifySecret = process.env.SHOPIFY_APP_SECRET; // Store this in env vars!

  // Generate hash from raw body and secret
  const hash = crypto
    .createHmac('sha256', shopifySecret)
    .update(req.body, 'utf8')
    .digest('base64');

  // Verify signature
  if (crypto.timingSafeEqual(Buffer.from(hmac), Buffer.from(hash))) {
    console.log('🎉 We got a valid order!');
    // Add your logic to push the order to the printing company here
    res.sendStatus(200);
  } else {
    console.log('⚠️ Invalid webhook signature');
    res.sendStatus(403);
  }
});

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