API 404使用VueJs、ExpressJsとマングース

Question

だから私は、私がアクセスした場合、すべてのデータが "示されているように私のアプリは、私が正常に動作APIを作成している

私のAPIに接続しようとしている404エラーを取得していますhttp://localhost:3000/api/users「私は私のVueのアプリを介してデータにアクセスするとき

は、しかし、私は404を得る：

はhttp://localhost:8080/api/users 404（見つかりません）

をGET以下

コード：

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がポート8080でリクエストしているようです。

あなたはそうのような.get方法で正しいポート番号を指定することができます。

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

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

を}アクセスするよりも、原点URLをしません。

Answer 3

最後にそれを解決しました。私はwebpack.configファイルに以下のコードを追加する必要：あなたは間違ったポートにアクセスしているよう

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