nuxt axios.post请求与空体

Question

我正在尝试使用axios工作的nuxt。 我执行以下发布请求（store / index.js）：

login({ commit }, { username, password }) {
  const data = JSON.stringify({
    password
  , username
  })
  console.log('store login ', username, password)
  this.$axios.post('http://localhost:3000/api/login', data)  
  .then(res => {
    commit('SET_USER', res.data)
  })
  .catch(error => {
    console.log(error.response)
  })
}

我的后端看起来像这样（api / auth.js）：

const express           = require('express')
const session           = require('express-session')
const body_parser       = require('body-parser')
const app               = express()
const router            = express.Router()

app.use(body_parser.json())
app.use(body_parser.urlencoded({ extended: true }))
app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: false
}))

router.post('/login', (req, res) => {
  console.log('try to login ', req.body)
  if (!req.body)
    return res.status(401).json({ message: 'No body' })
  if (req.body.username === 'demo' && req.body.password === 'demo') {
    req.session.auth_user = { username: 'demo' }
    console.log('logged in')
    return res.json({ username: 'demo' })
  }
  res.status(401).json({ message: 'Bad credentials' })
})

我的问题是，req.body总是未定义的。但是在我可以看到的错误消息中，params被发送了。 （config.data）

有人知道我错过了什么吗？我使用body-parser并检查了100次。我想这是显而易见的事情，但我看不到它。

我的nuxt.config.js：

module.exports = {
  ...
  modules: [
    '@nuxtjs/axios'
  , '@nuxtjs/auth'
  ],
  router: {
    middleware: ['auth']
  },
  serverMiddleware: ['@api/auth']
  ...
}

Answer 1

可能您也会遇到此错误。这是由于cors政策引起的。

  

从“ http://localhost:3000/ .......”访问XMLHttpRequest   原产地“ http://127.0.0.1:3000”已被CORS政策阻止：   对预检请求的响应未通过访问控制检查：否   请求中存在“ Access-Control-Allow-Origin”标头   资源。

我的项目中发生了相同的问题。

在服务器index.js更改行中

const host = process.env.HOST || 'localhost'

和nuxt.config.js

axios: {
baseURL: 'http://localhost:YOUR_PORT'
 },