关于vuecli与express构建的项目中的数据交互问题

刚学完express和vue,想写个vue+express的项目,但是有些地方想不太通,想请问一下:
vue如何将数据传输给express并且不跳转页面得到返回数据?网上查到别人的项目是:

  • 先用axios来get/post:
axios.post('/api/nameCheck', {
            name: this.name
          })
          .then(...)
  • 再在vue中设置代理:
proxyTable: {
        '/api': {
            target: 'http://localhost:3000/',
            changeOrigin: true,
            
        }
    },
  • 然后在server文件夹下的app.js中:
var router1=require('./api/user');
...
app.use('/api', router1);
  • 最后在api/user.js中处理并返回数据
const express = require('express')
const router = express.Router()

router.get('/users', (req, res, next) => {
  ...
    res.send(users)
})

请问vue和express是这样传递数据的吗?可是我这样传递数据端口号并没有变:

POST http://localhost:8089/api/nameCheck 404 (Not Found)

请问是哪里出了问题呢?该怎么改?谢谢。

阅读 3.3k
2 个回答
router.get('/users', (req, res, next) => {
  ...
    res.send(users)
})

你的后端api的url错了,譬如你的实际地址为:

localhost:3000/nameCheck 

那么代理到的ttp://localhost:8089/api/nameCheck,怎么可能拿到数据呢?因为你后台并没这个地址
解决办法
1.

proxyTable: {
        '/': {
            target: 'http://localhost:3000/',
            changeOrigin: true,
            
        }
    },

2.修改服务端路由

router.get('/api/users', (req, res, next) => {
  ...
    res.send(users)
})

并修改代理

 '/api': {
            target: 'http://localhost:3000/api',
            changeOrigin: true,
            
        }

你先服务端渲染的话 去看看vue-ssr

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题