从在不同端口中运行的Vue应用程序调用节点表达服务器API

Question

我最近开始学习vue.js,目前正在使用vue.js和vue-simple-webpack模板,express和mongo来开发一个简单的应用程序.我正在使用localhost来开发和测试应用程序.

应用程序前端在端口8080中运行,服务器在不同的端口中运行(3000)

这是我的server.js地方,我有一个简单的api从我的数据获取数据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));
    })
})

测试了server.js,它有效.见下面的截图.

Vue应用程序正在http://localhost:8080/使用webpack模板的默认配置运行.我试图/products使用$ http get从vue.js文件调用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');
            });
        }
    }
}

但是我在浏览器控制台中收到以下错误.

正如你所看到的,即使我现在用的端口3000中server.js,当我尝试访问/productsAPI结束,它实际上通过端口进入8080.因此它会抛出404 http错误.

我的问题是我如何从在不同端口运行的前端内部访问API端.这甚至可能吗？

我可以在这里使用API代理吗？如果是这样,有人可以指出我正确的方向,因为网上没有太多的信息.

Answer 1

您可以使用webpack提供的代理配置.

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

片段配置:

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

更好的做法是将/ api/*请求转发到http:// host:port/api /*urls.