解决axios Post请求数据 后台接收不到

首先明确一点 这是前端的问题

贴服务器代码

const express = require('express');
let app = express();
const bodyParser = require('body-parser');
const cors = require('cors');

app.listen( 9090 , 'localhost' , () => {
    console.log(' http://localhost:9090 ');
})

// app.use('/' , express.static('./src'));
// app.use( ( request , response , next ) => {
//     response.header('Access-Control-Allow-Origin' , '*');
//     next();
// })
app.use(cors())
app.use(bodyParser.urlencoded( { extended : false }));

app.post('/index' , ( request , response ) => {
    console.log(request.body);
    response.send({
        code : 200,
        msg : '请求成功',
    })
})

app.get( '/page' , ( request , response ) => {
    console.log(request.query);
    response.send( {
        code : 200 ,
        msg : '请求成功'
    })
})

ps : get请求是正常接收到数据的

第一种解决方案

通过设置axios请求拦截 在请求头内加入Content-Type

import axios from 'axios'

const instance = axios.create({// 这里使用了单例模式 封装向此地址发送的请求为一个单例
    baseURL : 'http://localhost:9090',
    timeout : 5000,
})
// 设置请求拦截 interceptors 拦截
instance.interceptors.request.use( config => { 
    if( config.method == 'post'){ // 判断请求是否为post请求
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded' // 通过在请求头内加入Content-Type解决
    }
    console.log(config);
    return config;
} , error => {
    console.log(error);
    return Promise.reject( error )
})

第二种解决方案

使用qs插件将对象形式的数据序列化为URL格式

import request from './request'
import qs from 'qs'

// params数据的原貌 { id : 12 , name : 'xiaozhi' } 通过qs.stringify序列化为URL形式 id=12&name=xiaozhi
export const GetIndex = params => request.post('/index' ,  qs.stringify(params));
export const GetPage = params => request.get('/page' , {params})