使用 VueJs、ExpressJs 和 Mongoose 的 API 404

Posted 2023-03-11

【中文标题】使用 VueJs、ExpressJs 和 Mongoose 的 API 404

【英文标题】：API 404 using VueJs, ExpressJs and Mongoose

【发布时间】：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

【参考方案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'