Nodejs uses the express framework to post the request message "badrequesterror:request aborted"

Report the wrong diagram first :

Let's go straight to the results , It depends on whether you have enabled mock.js of .

Because my front-end framework adopts VueElementAdmin, This framework has mockJS Simulation data of . So I also use this configuration by default .

The front end uses axios As a request framework , The key codes are as follows :

import axios from 'axios'

//  establish axios example 
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

The main back-end code is as follows :

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

const startServer = () => {
  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(` Service started :http://${ hostName }:${ port }`)
  })
}

in addition , Because we need to solve cross domain problems , The front end uses a proxy ：

'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 = ''
#  Page service port 
VUE_APP_PORT = 4310
#  Destination forwarding address 
VUE_APP_TARGET_API='http://127.0.0.1:95'

analysis

axios default header Inside content-type Namely application/json. Then the back-end parsing is also json form . But I used this mockJS Of mock-server Later, the transmission form was changed , Cause not to recognize . The solution is simple , stay axios When creating, specify header Of 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;'
  }
})

then express There is no need to receive it header, The default is recognition content-type Of , Of course, the configuration is also ok , You can use the following template , Add middleware :

server.all("*", function (req, res, next) {
    // Set domain names that allow cross domain ,* Allows any domain name to cross domain 
    res.header("Access-Control-Allow-Origin", "*")
    // Allow the header type 
    res.header("Access-Control-Allow-Headers", "*")
    // How cross domain requests are allowed 
    res.header("Access-Control-Allow-Methods", "*")

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

    if (req.method.toLowerCase() == 'options') {
      res.send(200)  // Give Way options Try to request a quick end 
    } else {
      next()
    }

More violent , Let it all go . Of course , You can change... As needed .