Mongodb 使用VueJs、ExpressJs和Mongoose的API 404

因此，当我的应用程序试图连接到我的api时，我遇到了404错误

我已经创建了一个运行良好的api，因为当我访问“”时，所有数据都会显示出来

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

获取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>

webpack.config.js

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

---

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

看起来axios是在端口

8080

上发出请求的

您可以在

.get

方法中指定正确的端口号，如下所示：

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

---

看起来axios正在端口

8080

上发出请求

您可以在

.get

方法中指定正确的端口号，如下所示：

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

---

在Server.js外接程序中，您可以跨域解决问题。 在访问vue.js之前，不要创建url

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

---

}))

外接程序Server.js，您可以跨域解决问题。 在访问vue.js之前，不要创建url

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

---

}))

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

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

---

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

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

---

看起来您访问了错误的端口

8080

而不是

3000

看起来您访问了错误的端口

8080

而不是

3000

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