Node.js Express中同时获取URL参数与启用静态资源的问题

用户通过Telegram打开带/?code=123123123参数的WebApp链接，需要在Node.js Express中捕获该code参数并传递给前端。当前不启用express.static中间件时，可正常获取参数并写入文件；但启用该中间件后无法获取参数，只能在加载前端页面或获取参数中二选一，需要实现二者同时运行。

Nginx配置 #

server {
    listen 80 default_server;
    server_name mysite.com ;
    root /var/www/crop-image-frontend;
    add_header 'Content-Security-Policy' 'upgrade-insecure-requests';

    location /api/ {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Node.js代码 #

const express = require('express');
const fs = require('fs');
app.use(bodyParser.json());

app.get('/api', (req, res) => {
  const { code } = req.query;

  fs.writeFile('file.txt', code, (err) => {
    if (err) console.error('Error writing to file:', err);
   
    res.send('Value saved to file');
  });
});

问题原因 #

Express的中间件和路由是按注册顺序匹配的。当启用app.use('/api', express.static(...))后，所有以/api开头的请求会先经过静态文件中间件：如果静态目录中存在对应路径的文件（比如index.html），中间件会直接返回该文件，不会继续执行后续的API路由，导致参数无法被捕获。

解决方法 #

方法一：分离API与静态资源路径（推荐）

将静态资源挂载到根路径/，API保留/api路径，避免路由冲突。同时调整Nginx配置，将根路径请求代理到Express，统一处理参数和静态资源。

修改后的Express代码：

const express = require('express');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

// 优先处理根路径的code参数
app.get('/', (req, res) => {
  const { code } = req.query;
  if (code) {
    // 将code写入文件，也可存入session/Redis方便前端后续获取
    fs.writeFile('file.txt', code, (err) => {
      if (err) console.error('Error writing to file:', err);
    });
    // 返回前端页面，可通过响应头注入code
    res.sendFile(path.join(__dirname, 'path to frontend', 'index.html'), {
      headers: { 'X-Telegram-Code': code }
    });
  } else {
    res.sendFile(path.join(__dirname, 'path to frontend', 'index.html'));
  }
});

// 挂载静态资源到根路径
app.use(express.static(path.join(__dirname, 'path to frontend')));

// 新增API接口，供前端获取code
app.get('/api/get-code', (req, res) => {
  fs.readFile('file.txt', 'utf8', (err, data) => {
    if (err) return res.status(500).send('Failed to read code');
    res.json({ code: data });
  });
});

app.listen(3000, () => console.log('Server running on port 3000'));

修改后的Nginx配置：

server {
    listen 80 default_server;
    server_name mysite.com ;
    add_header 'Content-Security-Policy' 'upgrade-insecure-requests';

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

方法二：调整路由与中间件顺序

如果必须将静态资源挂载到/api路径，只需将API路由注册在静态中间件之前，确保参数请求被优先处理：

const express = require('express');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

// 先注册API路由，优先处理/api?code=xxx请求
app.get('/api', (req, res) => {
  const { code } = req.query;
  fs.writeFile('file.txt', code, (err) => {
    if (err) console.error('Error writing to file:', err);
    // 处理完参数后返回前端页面
    res.sendFile(path.join(__dirname, 'path to frontend', 'index.html'));
  });
});

// 再挂载静态资源中间件
app.use('/api', express.static(path.join(__dirname, 'path to frontend')));

app.listen(3000);

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