如何获取表单提交传递的查询参数？express、react-native场景读取失败

• 你遇到的GET请求拿不到查询参数、POST请求拿不到请求体的问题，分两种场景对应不同根因：
  • express场景下：你注释了urlencoded、json等解析中间件，且原生req.url在express路由匹配后会自动裁剪掉查询参数部分，参数默认存放在内置的req.query对象中，你没有读取对应字段
  • react-native-http-bridge场景下：这个包的原生实现默认返回的路径会自动截断查询参数，需要手动从原始请求信息中提取查询参数和请求体

express环境 #

直接读取express内置解析好的req.query对象即可，不需要额外中间件：

app.get('/form', (req, res) => {
  // 直接读取查询参数
  const ssid = req.query.ssid
  const password = req.query.password
  console.log('查询参数：', ssid, password)
  // 原有返回逻辑保持不变
})

如果需要拿到完整带参数的URL，可以手动拼接：

const queryString = new URLSearchParams(req.query).toString()
const fullUrl = `${req.protocol}://${req.get('host')}${req.path}?${queryString}`

react-native-http-bridge环境 #

从请求回调的原始URL中手动解析参数：

import httpBridge from 'react-native-http-bridge'

httpBridge.start(3000, 'http', (req) => {
  // req.url为完整的原始路径，包含查询参数
  const [path, queryPart] = req.url.split('?')
  const query = {}
  if (queryPart) {
    queryPart.split('&').forEach(item => {
      const [key, value] = item.split('=')
      query[decodeURIComponent(key)] = decodeURIComponent(value)
    })
  }
  const ssid = query.ssid
  const password = query.password
  // 后续业务逻辑
})

不需要依赖官方解析中间件，手动读取请求流解析即可：

express环境手动解析 #

// 删掉路由参数中未定义的urlencodedParser，否则会直接报错
app.post("/form1", (req, res) => {
  let body = ''
  // 监听流事件接收请求体
  req.on('data', chunk => {
    body += chunk.toString()
  })
  req.on('end', () => {
    // 解析x-www-form-urlencoded格式参数
    const postData = {}
    body.split('&').forEach(item => {
      const [key, value] = item.split('=')
      postData[decodeURIComponent(key)] = decodeURIComponent(value)
    })
    const ssid = postData.ssid
    const password = postData.password
    console.log('POST参数：', ssid, password)
    // 按原有逻辑返回响应
    res.set('Content-Type', 'application/json')
    res.send(JSON.stringify({"req.body.":"ok"}))
  })
})

react-native-http-bridge环境手动解析 #

直接解析回调返回的原始请求体即可：

httpBridge.start(3000, 'http', (req) => {
  if (req.method === 'POST' && req.url.split('?')[0] === '/form1') {
    const postData = {}
    req.body.split('&').forEach(item => {
      const [key, value] = item.split('=')
      postData[decodeURIComponent(key)] = decodeURIComponent(value)
    })
    const ssid = postData.ssid
    const password = postData.password
    // 后续返回响应逻辑
  }
})

• 所有参数读取后需要做decodeURIComponent转义，避免特殊字符出现乱码
• 原示例代码中POST路由引用了已被注释的urlencodedParser变量，必须删除该参数否则会直接抛出变量未定义错误

内容的提问来源于stack exchange，提问作者R.singh