express怎么获取axios中data给的的参数

Posted 2023-04-07

参考技术A 在mutation的state的自定义set change方法的时候 根据使用场景的不同 储存到... 或者其他本地储存中把对应state的初始化改成从本地储存中获取

vue app axios post data to express 后端接收 undefined

【中文标题】vue app axios post data to express 后端接收 undefined

【英文标题】：vue app axios post data to express backend receiving undefined

【发布时间】：2019-04-04 18:39:31

【问题描述】：

这是我的 vue 应用的 main.js，这个应用在 localhost:8080 上运行并尝试将数据发布到 localhost:8081 (express.js)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from './backend/vue-axios'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue(
  el: '#app',
  router,
  axios,
  template: '<App/>',
  components:  App 
)

Login.vue 组件

<template>
  <div class="login-wrapper border border-light">
    <form class="form-signin" @submit.prevent="login">
      <h2 class="form-signin-heading">Please sign in</h2>
      <label for="inputEmail" class="sr-only">Email address</label>
      <input v-model="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
      <label for="inputPassword" class="sr-only">Password</label>
      <input v-model="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
  </div>
</template>

<script>
export default 
  name: 'Login',
  data () 
    return 
      email: '',
      password: ''
    
  ,
  methods: 
    login () 
      this.axios.post('http://localhost:8081/login',  username: this.email, password: this.password, grant_type: 'password', client_id: null, client_secret: null )
        .then(request => this.loginSuccessful(request))
        .catch(() => this.loginFailed())
    ,
    loginSuccessful (req) 
      if (!req.data.token) 
        this.loginFailed()
        return
      

      localStorage.token = req.data.token
      alert(req.data.token)
      this.error = false

      this.$router.replace(this.$route.query.redirect || '/authors')
    ,
    loginFailed () 
      this.error = 'Login failed!'
      delete localStorage.token
    
  

</script>

<style lang="css">
body 
  background: #605B56;


.login-wrapper 
  background: #fff;
  width: 70%;
  margin: 12% auto;


.form-signin 
  max-width: 330px;
  padding: 10% 15px;
  margin: 0 auto;

.form-signin .form-signin-heading,
.form-signin .checkbox 
  margin-bottom: 10px;

.form-signin .checkbox 
  font-weight: normal;

.form-signin .form-control 
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;

.form-signin .form-control:focus 
  z-index: 2;

.form-signin input[type="email"] 
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;

.form-signin input[type="password"] 
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;

</style>

/src/backend/vue-axios/axios.js

import axios from 'axios'

const API_URL = 'http://localhost:8081/restrictedArea/enter'

export default axios.create(
  baseURL: API_URL,
  headers: 
    'content-type': 'application/x-www-form-urlencoded',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
    'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token'
    // 'Authorization': 'Bearer ' + localStorage.token
  
)

/src/backend/vue-axios/index.js

import Vue from 'vue'
import VueAxios from 'vue-axios'

import axios from './axios'

Vue.use(VueAxios, axios)

export default axios

index.js（后端 express.js）

//MARK: --- REQUIRE MODULES

const port = 8081
const mySqlConnection = require('./databaseHelpers/mySqlWrapper')
const accessTokenDBHelper = require('./databaseHelpers/accessTokensDBHelper')(mySqlConnection)
const userDBHelper = require('./databaseHelpers/userDBHelper')(mySqlConnection)
const oAuthModel = require('./authorisation/accessTokenModel')(userDBHelper, accessTokenDBHelper)
const oAuth2Server = require('node-oauth2-server')
const express = require('express')
const expressApp = express()
var cors = require('cors')
expressApp.use(cors())
expressApp.oauth = oAuth2Server(
  model: oAuthModel,
  grants: ['password'],
  debug: true
)

const restrictedAreaRoutesMethods = require('./restrictedArea/restrictedAreaRoutesMethods.js')
const restrictedAreaRoutes = require('./restrictedArea/restrictedAreaRoutes.js')(express.Router(), expressApp, restrictedAreaRoutesMethods)
const authRoutesMethods = require('./authorisation/authRoutesMethods')(userDBHelper)
const authRoutes = require('./authorisation/authRoutes')(express.Router(), expressApp, authRoutesMethods)
const bodyParser = require('body-parser')

//MARK: --- REQUIRE MODULES

//MARK: --- INITIALISE MIDDLEWARE & ROUTES

//set the bodyParser to parse the urlencoded post data
expressApp.use(bodyParser.urlencoded( extended: true ))

//set the oAuth errorHandler
expressApp.use(expressApp.oauth.errorHandler())

//set the authRoutes for registration and & login requests
expressApp.use('/auth', authRoutes)

//set the restrictedAreaRoutes used to demo the accesiblity or routes that ar OAuth2 protected
expressApp.use('/restrictedArea', restrictedAreaRoutes)

//MARK: --- INITIALISE MIDDLEWARE & ROUTES
var allowCrossDomain = function(req, res, next) 
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
// intercept OPTIONS method
if ('OPTIONS' == req.method) 
res.sendStatus(200);
 else 
next();

;

expressApp.use(allowCrossDomain);
//init the server
expressApp.listen(port, () => 

   console.log(`listening on port $port`)
)

expressApp.post('/login',function(req,res)
  var username=req.body.username;
  var password=req.body.password;
  console.log("User name1 = "+username+", password is "+password);
  res.end("yes");
);

控制台输出：

listening on port 8081
User name1 = undefined, password is undefined
User name1 = undefined, password is undefined

Axios 以这种格式发布，我在 chrome 控制台中找到了它："username":"[e-mail]","password":"123","grant_type":"password","client_id":null ,"client_secret":null:

我使用 chrome ARC 以这种成功的格式发布： username=test&password=Abcd1234&grant_type=password&client_id=null&client_secret=null

谁知道问题出在哪里？

【问题讨论】：

你能在 /login 处理程序中记录 req 的全部内容吗？

@Jim B. 是的，我发现了类似 body: '"username":"[e-mail]","password":"123","grant_type":"password" ,"client_id":null,"client_secret":null': '' ，但是这里发帖太长了

我在您的服务器代码中没有看到 json bodyparser...

【参考方案1】：

在 main.js 中试试这个：

expressApp.use(bodyParser.json());

另外，不要在 axios.js 中使用 url-encoding，而是使用 json。将您的标题设置为此：

'content-type': 'application/json',

【讨论】：

刚刚添加，但我只能获取 req.body ( '"username":"[e-mail]","password":"123","grant_type":"password" ,"client_id":null,"client_secret":null': '' ) 但不是 req.body.username