NodeJS使用Express框架进行POST请求报“BadRequestError:request aborted”

本文介绍: Nod eJS使用Ex pre ss 框架进行POST请求报“BadReque s tEr ror:request a borte d”

先上报错图:

直接说结果吧，跟你是否启用了mock.js有关。

由于我的前端框架采用了VueElementAdmin，这个框架内置了mockJS的模拟数据。所以我默认也采用了这个配置。

写于2022-07-24 23:08:

下面文章仅供参考。目前而言，在不使用Moc kJS的情况下（尤其是那个mock server.js）,不管怎么配，是不会有问题的。但是一旦混合引入，就会出问题。下面文章仅供参考，关键是你是否引用了mockSe r v e r。

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: 'http://127.0.0.1:95', // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

export default service

主要的后端代码如下:

const express = require('express')
const server = express()

const startServer = () =&gt; {
  server.use(express.json())
  server.use(express.urlencoded({ extended: true }))

  server.post('/home/login', (req, resp) => {
    console.log(req.query)
    resp.send({
      code: 200
    })
  })

  const { port, hostName } = $serverConfig
  server.listen(port, hostName, () => {
    console.log(`服务已经启动:http://${ hostName }:${ port }`)
  })
}

另外，因为要解决跨域问题，前端使用了代理：

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || 'vue Admin Template' // page title

const port = process.env.VUE_APP_PORT

const baseApi = process.env.VUE_APP_BASE_API

const targetApi = process.env.VUE_APP_TARGET_API

const pathRewrite = process.env.VUE_APP_REWRITE_PATH

module.exports = {
  
  publicPath: '/',

  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV !== 'production',
  productionSourceMap: false,

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      [baseApi]: {
        target: targetApi,
        changeOrigin: true,
        pathRewrite: {
          ['^' + baseApi]: pathRewrite
        }
      }
    },
    before: require('./mock/mock-server.js')
  }
}

# just a flag
ENV = 'development'
VUE_APP_ENV='development'

# base api
VUE_APP_BASE_API = '/dev-api'
VUE_APP_REWRITE_PATH = ''
# 页面服务端口
VUE_APP_PORT = 4310
# 目标转发地址
VUE_APP_TARGET_API='http://127.0.0.1:95'

分析

axios 默认的header 里面的content–type就是application/json。然后后端的解析也是json形式。可是采用了这个moc kJS的moc k–server后改变了传输形式，导致不能识别。解决办法也很简单，在axios 创建的时候指定 header的content–type：

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000, // request timeout
  headers: {
    'Content-Type': 'application/json; charset=UTF-8;'
  }
})

然后 express那边可以不用配接收的header，默认是识别 content–type的，当然配置也可以，可以使用下面的模板，增加中间件:

server.all("*", function (req, res, next) {
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "*")
    //允许的header类型
    res.header("Access-Control-Allow-Headers", "*")
    //跨域允许的请求方式
    res.header("Access-Control-Allow-Methods", "*")

    res.header("Access-Control-Allow-Credentials", "true")

    if (req.method.toLowerCase() == 'options') {
      res.send(200)  //让options尝试请求快速结束
    } else {
      next()
    }