先上报错图:

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

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

写于2022-07-24 23:08:

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

前端采用的是axios作为请求框架，关键代码如下:

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

主要的后端代码如下:

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 } = $serverConfigserver.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 titleconst port = process.env.VUE_APP_PORTconst baseApi = process.env.VUE_APP_BASE_APIconst targetApi = process.env.VUE_APP_TARGET_APIconst pathRewrite = process.env.VUE_APP_REWRITE_PATHmodule.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形式。可是采用了这个mockJS的mock-server后改变了传输形式，导致不能识别。解决办法也很简单，在axios创建的时候指定header的content-type：

const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // url = base url + request urlwithCredentials: true, // send cookies when cross-domain requeststimeout: 5000, // request timeoutheaders: {'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()}

比较暴力，全部放开。当然，可以按需更改。

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

Nodejs之Express框架
Nodejs之Express框架 Express 简介安装 Express 第一个 Express 框架实例请求和响应路由静态文件 GET 方法 POST 方法文件上传 Cookie 管理 ...
在nodeJs的Express框架下用TypeScript编写router路由出现import关键字错误的解决方案
在nodeJs的Express框架下用TypeScript编写router路由出现import关键字错误的解决方案参考文章: (1)在nodeJs的Express框架下用TypeScript编写ro ...
NodeJS，EXpress框架的一知半解
一,什么是nodejs node.js是一个基于chrome V8引擎的JavaScript运行环境 (node.js并不是一门新的语言) 二.node.js的特点 1.事件驱动 2.非阻塞I/O 3 ...
Ajax学习：nodejs安装+express框架介绍
ajsx应用中,需要安装nodejs环境基于Chrome V8引擎(和浏览器上的谷歌的解析引擎一样)JavaScript运行环境 (31条消息) Node.js_安装_哇嘎123的博客-CSDN博客 ...
（九）nodejs循序渐进-Express框架（进阶篇）
Express 框架 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...
nodejs安装express框架
安装express框架 npm install express -gd -g代表安装到NODE_PATH的lib里面,而-d代表把相依性套件也一起安装.如果沒有-g的话会安装目前所在的目录(会建立一个 ...
网购电商管理系统 nodejs中express框架 mysql数据库 web开发 B/S框架 ejs模板简单服务器开发
背景介绍这个"大项目"开发背景是大二上的C++课设,王老师不明所以的就让我们制作一个类商用的网店管理系统,而且不限制语言,不限制框架,独立完成,时间大约10周.说实话这个项目对刚 ...
【SpringBoot的坑】Restful请求报错Request method 'POST' not supported，HiddenHttpMethodFilter无法将POST转换为PUT原因分析
直接上结论: 因为 SpringBoot 版本原因,在我目前使用的 2.2.4 版本中,需要在springapplication.xml文件中添加配置: spring.mvc.hiddenmetho ...
微信小程序网络请求异常怎么办_解决·微信小程序开发-网络请求报Invalid request 400错误...
今天学习了一下微信小程序的入门开发,在使用网络请求时,发现根据微信官方的API的方法进行操作出现Invalid request 400错误,到底怎么回事呢? 首先我们来看微信API网络请求示例代码: ...

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

先上报错图:

写于2022-07-24 23:08:

分析

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

最新文章

热门文章