问答

axios post 请求超时的问题

作者:admin 2021-05-15 我要评论

在写一个前后端分离的项目,在使用axios做请求的时候,发现请求超时问题 我的后端使用Node实现,代码如下: const express = require('express')const app = exp...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

在写一个前后端分离的项目,在使用axios做请求的时候,发现请求超时问题

我的后端使用Node实现,代码如下:

const express = require('express')
const app = express()

var mongoose = require('mongoose') // 引入 mongoose
mongoose.connect('mongodb://localhost/test') // 通过 mongoose 连接 mongodb 数据库

// 允许 post 请求
var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({
  extended: false
}))
app.use(bodyParser.json())

var db = mongoose.connection; // 数据库连接状态
db.on('error', console.error.bind(console, 'connection error:')) // 数据库连接失败
db.once('open', function () {
  console.log('数据库连接成功')
  // we're connected!(数据库连接成功)
})

var kittySchema = mongoose.Schema({
  name: {
    type: String, // 数据类型
    required: true, // 是否为必须
    defaule: '' // 默认值
    // enum: ['张三', '李四', '王五', '赵六'] // 枚举,默认值只可是枚举值
  },
  phone: {
    type: Number, // 数据类型
    required: true, // 是否为必须
    defaule: '' // 默认值
  }
})
var Kitten = mongoose.model('Kitten', kittySchema)

// 允许跨域
app.all("*", (req, res, next) => {
  // 设置允许跨域的域名,* 代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin", "*")
  // 允许的 header 类型
  res.header("Access-Control-Allow-Headers", "content-type")
  // 跨域允许的请求方式 
  res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS")
  if (req.method.toLowerCase() == 'options')
    res.send(200);  // 让 options 尝试请求快速结束
  else
    next()
})

app.post('/', (req, res) => {
  var user = new Kitten({
    name: req.body.name,
    phone: req.body.phone
  });
  user.save(function (err, res) {
    if (err) {
      return console.log(err);
    }
    console.log(res);
  });
})

app.listen(3000, () => {
  console.log('server start success')
})

前端代码如下:
main.js

import axios from 'axios'
Vue.prototype.axios = axios
axios.defaults.timeout = 5000

App.vue

console.log(2)
this.axios.post(
    'http://localhost:3000/', {
      name: this.name,
      phone: this.phone,
      address: this.address
    }).then(() => {
      console.log(3)
      that.$emit('tips', '信息提交成功')
    }).catch(err => {
      console.log(4)
      that.$emit('tips', err)
      // console.log(error)
    })

Network 显示:
image.png

Console 显示:
image.png

但是数据可以正常提交到 Mongo 数据库中,请问造成原因的问题是什么呢?如何解答?

PS:问度娘说是添加拦截器,但是按照方法添加后 post 依然无法运行到 console.log(3) 中

###

后端这边需要返回值吧

app.post('/', (req, res) => {
  var user = new Kitten({
    name: req.body.name,
    phone: req.body.phone
  });
  user.save(function (err) {
    if (err) {
      return res.status(500).json({error:err});
    }
    res.json({msg:"Success"})
  });
})

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 请问下prometheus怎么进行自定义的按业

    请问下prometheus怎么进行自定义的按业

  • 节流函数为什么,点击无效,监听窗口大

    节流函数为什么,点击无效,监听窗口大

  • express访问静态资源失败

    express访问静态资源失败

  • IE 浏览器下 match 方法报错

    IE 浏览器下 match 方法报错

腾讯云代理商
海外云服务器