从不同端口的 Vue 应用程序运行调用节点快速服务器 API

Question

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

应用程序 front-end 在端口 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 应用程序运行 in http://localhost:8080/ 使用 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');
            });
        }
    }
}

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

如您所见，即使我在 server.js 中使用端口 3000，当我尝试访问 /products api 端时，它实际上会通过端口 8080。因此它抛出 404 http 错误。

我的问题是如何从在不同端口运行的 front-end 访问 API 端。那有可能吗？

我可以在这里使用 API Proxying 吗？如果是这样，有人能给我指出正确的操作方法吗，因为网上没有太多可用的信息。

Answer 1

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

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

代码段配置：

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

更好的做法是将 /api/* 请求转发到 http://host:port/api/* 网址。

从不同端口的 Vue 应用程序运行调用节点快速服务器 API

Calling node express server API from Vue application running in a different port

node.js

express

webpack

vue-resource

vuejs2

从不同端口的 Vue 应用程序 运行 调用节点快速服务器 API

Calling node express server API from Vue application running in a different port

node.js

express

webpack

vue-resource

vuejs2

从不同端口的 Vue 应用程序运行调用节点快速服务器 API