Question

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

我创建了一个工作正常的api，因为当我访问＆＃39; http://localhost:3000/api/users＆＃39;

时会显示所有数据

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

获取http://localhost:8080/api/users 404（未找到）

以下代码：

Server.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;

Home.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有关吗？

Answer 1

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

您可以在8080方法中指定正确的端口号，如下所示：

.get

Answer 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();

}）;

Answer 3

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

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

API 404使用VueJs，ExpressJs和Mongoose

3 个答案: