第一个XHR

Question

我正在尝试制作一个“ MEVN”应用程序（MongoDB，Express，Vue，NodeJs）。

在客户端，我有一个vue组件，该组件提供了创建帖子的表单。该帖子基本上是标题和说明。所以我有这样的东西：

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

我的PostsService是处理帖子的助手：

import Api from '@/services/Api'

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

我的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

发布控制器如下所示：

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有一些动作，可以建立数据库连接并保存该帖子。

当我使用npm start启动服务器时，我得到的确认是我正在侦听端口8081。

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

第一个XHR

    Request URL: http://localhost:8081/posts
    Request Method: OPTIONS
    Status Code: 204 No Content
    Remote Address: [::1]:8081
    Referrer Policy: no-referrer-when-downgrade
    Access-Control-Allow-Headers: content-type
    Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
    Access-Control-Allow-Origin: *
    Connection: keep-alive
    Content-Length: 0
    Date: Sun, 15 Jul 2018 18:20:01 GMT
    Vary: Access-Control-Request-Headers
    X-Powered-By: Express
    Accept: */*
    Accept-Encoding: gzip, deflate, br
    Accept-Language: en,fr-FR;q=0.9,fr;q=0.8,en-US;q=0.7,en-GB;q=0.6
    Access-Control-Request-Headers: content-type
    Access-Control-Request-Method: POST
    Connection: keep-alive
    Host: localhost:8081
    Origin: http://localhost:8080
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

第二个XHR

    Request URL: http://localhost:8081/posts
    Request Method: POST
    Status Code: 404 Not Found
    Remote Address: [::1]:8081
    Referrer Policy: no-referrer-when-downgrade
    Access-Control-Allow-Origin: *
    Connection: keep-alive
    Content-Length: 145
    Content-Security-Policy: default-src 'self'
    Content-Type: text/html; charset=utf-8
    Date: Sun, 15 Jul 2018 18:20:01 GMT
    X-Content-Type-Options: nosniff
    X-Powered-By: Express
    Accept: application/json, text/plain, */*
    Accept-Encoding: gzip, deflate, br
    Accept-Language: en,fr-FR;q=0.9,fr;q=0.8,en-US;q=0.7,en-GB;q=0.6
    Connection: keep-alive
    Content-Length: 35
    Content-Type: application/json;charset=UTF-8
    Host: localhost:8081
    Origin: http://localhost:8080
    Referer: http://localhost:8080/posts/new
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
    {title: "test", description: "test"}

第二个XHR失败并告诉我：无法POST / posts

您能解释一下发生了什么以及如何解决吗？

谢谢

Answer 1

您的路由处理程序适用于/posts/posts，因此实际上您没有仅用于/posts的路由处理程序。 /posts/posts路径的第一部分来自此处：

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

添加到第一个的第二个/posts来自：

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

这两个是可加的，因此您具有处理程序的URL是/posts/posts。

我猜想OPTIONS请求有效，因为您安装了一些通用的CORS中间件，当使用OPTIONS请求时，该中间件正在批准所有路由。第二个请求失败，因为仅/posts就没有路由处理程序，/posts/posts只有一个路由处理程序。

您可以通过更改以下内容来解决此问题：

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

收件人：

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

或者，通过更改此内容：

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

对此：

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

选择哪种选项取决于您是否希望后控制器路由器上的每个路由都继承/posts作为路径的根，还是要在后控制器路由器的顶层定义多个路由。

使用Express Node.js进行XHR飞行前检查

第一个XHR

第二个XHR

1 个答案: