API de serveur express de nœud appelant de l'application Vue s'exécutant dans un port différent

Question

J'ai récemment commencé à apprendre vue.js et j'utilise actuellement vue.js avec vue-simple-webpack template, express et mongo pour développer une application simple. J'utilise localhost pour développer et tester l'application.

application fonctionne frontaux dans le port et le serveur est en cours d'exécution dans un autre port (3000)

Voici mon server.js où j'ai un api simple pour obtenir des données de mon localdb

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

testé le serveur.js, cela fonctionne. voir ci-dessous capture d'écran.

l'application Vue est en cours d'exécution dans http://localhost:8080/ en utilisant la configuration par défaut du modèle de webpack. Je suis en train d'appeler la fin /products api à partir du fichier vue.js en utilisant $ http get comme suit ...

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'); 
      }); 
     } 
    } 
} 

Mais je reçois l'erreur suivante dans la console du navigateur.

Comme vous pouvez le voir, même si je suis en utilisant le port 3000 à server.js, lorsque je tente accéder à la /products fin api, il va en fait par le port 8080. Par conséquent, il génère une erreur http .

Ma question est comment je peux accéder à la fin de l'API à partir de l'interface qui s'exécute dans un port différent. Est-ce que c'est possible ?

Puis-je utiliser API Proxying ici. Si oui, quelqu'un peut-il me diriger dans la bonne direction sur la façon de le faire, car il n'y a pas beaucoup d'informations disponibles sur le web.

Answer 1

Vous pouvez utiliser la configuration de proxy fournie par webpack.

Docs: https://webpack.js.org/configuration/dev-server/#devserver-proxy

extrait config:

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

Une meilleure pratique serait le transfert/api/* demandes de http://host:port/api/ * urls.