別のポートで実行されているVueアプリケーションからノードエクスプレスサーバAPIを呼び出す

Question

最近、vue.jsの学習を開始し、現在vue.jsをvue-simple-webpackテンプレート、express、mongoで使用して簡単なアプリケーションを開発しました。私はlocalhostを使ってアプリケーションを開発し、テストしています。

アプリケーションのフロントエンドポートで実行され、サーバが別のポート（3000）ここで

ある中で実行されている私の私は私のlocaldb

からデータを取得するためのシンプルなAPIを持っている server.js

const express = require('express'); 
const MongoClient = require('mongodb').MongoClient; 
const mongodb = require('mongodb'); 
const bodyParser= require('body-parser'); 
const app = express(); 
var db; 

var URL='mongodb://localhost:27017/'+'mydb'; 
console.log(URL); 

app.use(express.static(__dirname + '/public')); 
app.use(bodyParser.urlencoded({extended: true})) 
app.use(bodyParser.json()) 

MongoClient.connect(URL, (err, database) => { 
    if (err) 
    return console.log(err); 
    db = database; 
    app.listen(3000,() => { 
    console.log('listening on 3000'); 
    }) 
}) 

app.get('/products', (req, res) => { 
    db.collection('products').find().toArray(function(err, results) { 
    console.log(results) 
    res.setHeader('Content-Type', 'application/json'); 
    res.send(JSON.stringify(results)); 
    }) 
}) 

はserver.jsをテストしました。下のスクリーンショットを参照してください。

VueのアプリケーションはWebPACKのテンプレートのデフォルト設定を使用して​​で実行されています。私は...次のように$ HTTP GETを使用してvue.jsファイルから/products APIエンドを呼び出そうと

export default { 
    name: 'Products', 
    methods: { 
     get: function() { 
      // GET request 
      this.$http({ 
       url: '/products', 
       method: 'GET' 
      }).then(function(response) { 
       console.log('ok'); 
      }, function(response) { 
       console.log('failed'); 
      }); 
     } 
    } 
} 

しかし、私は、ブラウザのコンソールで次のエラーを取得しています。

あなたは私が/products APIエンドにアクセスしようとすると、それが実際にポート8080を通過、私はserver.jsでポート3000を使用していていても、見ることができるように。したがって、 HTTPエラーがスローされます。

私の質問は、別のポートで動作するフロントエンド内からAPIのエンドにアクセスする方法です。それも可能ですか？

ここでAPI Proxyingを使用できますか？そうであれば、Web上で利用可能な情報が多くないため、誰かが正しい方向を教えてくれますか？

Answer 1

webpackが提供するプロキシ設定を使用できます。

ドキュメント：https://webpack.js.org/configuration/dev-server/#devserver-proxy

スニペットの設定：

proxy: { 
    "/products": "http://localhost:3000/products" 
} 

より良い練習がhttp://host:port/api/ * URLへの転送/ API/*リクエストになります。