node.js - 从运行在不同端口的 Vue 应用程序调用 Node 快速服务器 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 从 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 ，当我尝试访问 /products api end ，它实际上通过端口 8080 .因此它抛出一个 404 http 错误。

我的问题是如何从运行在不同端口的前端访问 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/ * 网址。