使用 VueJs、ExpressJs 和 Mongoose 的 API 404答案

【问题标题】：API 404 using VueJs, ExpressJs and Mongoose使用 VueJs、ExpressJs 和 Mongoose 的 API 404
【发布时间】：2017-12-26 17:13:04
【问题描述】：

所以当我的应用程序尝试连接到我的 api 时，我收到 404 错误

我创建了一个运行良好的 api，因为当我访问“http://localhost:3000/api/users”时会显示所有数据

但是，当我通过 Vue 应用程序访问数据时，我得到了 404：

GET http://localhost:8080/api/users404（未找到）

代码如下：

服务器.js

var express = require('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var users = require('./routes/users.js'); //routes are defined here
var app = express(); //Create the Express app
var port = process.env.PORT || 3000;

var mongoUri = 'mongodb://foo';
mongoose.connect(mongoUri);

//configure body-parser
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use('/api', users); //This is our route middleware

app.listen(port, function () {
    console.log('listening to port ' + port)
});

module.exports = app;

主页.vue

<script>
    import axios from 'axios';

    export default {
       data() {
           return {
               quote: ''
           }
       },
       created() {
           axios.get('/api/users')
               .then((res) => {
                   console.log(res.data);
                   this.quote = res.data;
               })
               .catch(error => {
                   console.log("error", error);
               });
       },
   }
</script>

Users.js

var Users = require('../models/users.js');
var express = require('express');
var router = express.Router();

router.route('/users')
    // Get all users
    .get(function(req, res) {
        Users.find(function(err, users) {
            if (err) {
                return res.send(err);
            }

            res.json(users);
       });
    });

webpack.config.js

output: {
    path: __dirname + '/build/',
    publicPath: 'build/',
    filename: 'build.js'
},

我做错了什么。我可以假设它与我的 server.js 有关吗？

【问题讨论】：

看起来您访问了错误的端口 8080 而不是 3000

标签： mongodb api express mongoose vue.js

【解决方案1】：

看起来 axios 正在端口 8080 上发出请求。

您可以像这样在.get 方法中指定正确的端口号：

axios.get('/api/users', { port: 3000 }).then(...)

【讨论】：

是的，同样的错误。认为它可能与 webpack.config 文件有关？

【解决方案2】：

添加 Server.js，你的问题是跨域的。就地不来源你的网址而不是访问 vue.js

app.all('*', function (req, res, next) {
var origin = req.get('origin');
res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Headers', 'X-Requested-With');
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-type, Accept, Authorization');

if (req.method === 'OPTIONS') {
    return res.status(200).end();
}
next();

});

【讨论】：

【解决方案3】：

终于解决了。我需要将以下代码添加到 webpack.config 文件中：

devServer: {
    proxy: {
        '/api/*' : {
            target: 'http://localhost:3000'
        }
    }
}

【讨论】：