XHR带Express Node.js的飞行前准备

我正在尝试创建一个“MEVN”应用程序（MongoDB、Express、Vue、NodeJs）

在客户端，我有一个vue组件，它提供了一个创建帖子的表单。这篇文章基本上是一个标题和描述。所以我有这样的想法：

methods: {
  async addPost () {
    await PostsService.addPost({
      title: this.title,
      description: this.description
    })
    this.$router.push({ name: 'Posts' })
  }
}

var express = require('express')
  , router = express.Router()
  , Post = require('../models/post')

// Add new post
router.post('/posts', function(req, res) {
  var title = req.title;
  var description = req.description;
  post = Post.create(title, description);
  if(post) {
    res.send({flag: 'SUCCESS', content: post})
  } else {
    res.send({flag: 'ERROR', content: 'Failed to create the post'})
  }
})

module.exports = router

My PostsService是处理帖子的助手：

import Api from '@/services/Api'

export default {
  addPost (params) {
    return Api().post('posts', params)
  },
}

My Api是一个简单的axios构造函数：

import axios from 'axios'

export default() => {
  return axios.create({
    baseURL: `http://localhost:8081`
  })
}

在服务器端，我有一个入口点：

var express = require('express')
  , app = express()

app.use(require('./controllers'))

app.listen(8081, function() {
  console.log('Listening on port 8081...')
})  

启动控制器加载程序的步骤：

var express = require('express')
  , router = express.Router()

router.use('/posts', require('./posts'))

module.exports = router

post控制器如下所示：

methods: {
  async addPost () {
    await PostsService.addPost({
      title: this.title,
      description: this.description
    })
    this.$router.push({ name: 'Posts' })
  }
}

var express = require('express')
  , router = express.Router()
  , Post = require('../models/post')

// Add new post
router.post('/posts', function(req, res) {
  var title = req.title;
  var description = req.description;
  post = Post.create(title, description);
  if(post) {
    res.send({flag: 'SUCCESS', content: post})
  } else {
    res.send({flag: 'ERROR', content: 'Failed to create the post'})
  }
})

module.exports = router

如您所见，models/post中有一些操作将建立db连接并保存post

当我使用npm start启动服务器时，我确认正在端口8081上侦听

调用addPost（）函数时，会收到两个XHR请求：

第一个XHR 第二个XHR 第二个XHR失败并告诉我：cannotpost/posts

你能给我解释一下发生了什么以及如何修复它吗

---

谢谢

您的路由处理程序是用于

/posts/posts

的，因此您实际上没有用于

/posts

的路由处理程序。

/posts/posts

路径的第一部分来自这里：

router.use('/posts', require('./posts'))

第二个添加到第一个的

/posts

来自：

router.post('/posts', function(req, res) {...}

这两个是相加的，因此您拥有处理程序的URL是

/posts/posts

我猜，

OPTIONS

请求之所以有效，是因为您安装了一些通用的CORS中间件，在使用选项请求时批准所有路由。第二个请求失败，因为只有

/posts

没有路由处理程序，只有一个路由处理程序用于

/posts/posts

---

您可以通过以下方式解决此问题：

router.use('/posts', require('./posts'))

router.post('/posts', function(req, res) {..}

致：

或者，通过更改此选项：

router.use('/posts', require('./posts'))

router.post('/posts', function(req, res) {..}

为此：

router.post('/', function(req, res) {..}

---

选择哪个路由取决于您是否希望post controller路由器上的每个路由继承

/posts

作为路径的根，或者您是否希望在post controller路由器的顶层定义多个路由