Node.js 从运行在不同端口的Vue应用程序调用node express server API

我最近开始学习vue.js，目前正在使用vue.js与template、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/

使用网页包模板的默认配置。我试图使用$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

。因此，它抛出一个404http错误

我的问题是如何从运行在不同端口的前端访问API端。这可能吗

---

我可以在这里用吗。如果是这样的话，有人能给我指出正确的方向吗？因为网络上没有太多可用的信息。

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

文件：

代码段配置：

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

---

更好的做法是将/api/*请求转发到*URL。

$http（）

应允许您指定端口。我在webpack web配置中添加了代理。还按照您的建议将服务器URL更改为/api/*模式。但当我尝试访问/api/产品时，问题仍然存在。$http.get方法尝试从localhost:8080端口内访问/api/产品。因此，我得到了404错误，请参考我在代码github代码repo中提出的这个问题。您可以添加以下配置。我只是检查了代码并进行了测试。它工作得很好代理：{/api/：{target:，secure:false}正确。这很有效。在使用proxy的早期解决方案中，我犯了一个错误。谢谢@SaurabhThis这真是太棒了，是解决整个CORS问题最简单的方法。