从运行在不同端口的 Vue 应用程序调用 node express 服务器 API

Posted 2023-02-22

【中文标题】从运行在不同端口的 Vue 应用程序调用 node express 服务器 API

【英文标题】：Calling node express server API from Vue application running in a different port

【发布时间】：2018-03-29 06:24:59

【问题描述】：

我最近开始学习 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 应用程序使用 webpack 模板的默认配置在 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。因此它会抛出 404 http 错误。

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

我可以在这里使用API Proxying 吗？如果是这样，由于网络上没有太多可用的信息，有人可以为我指出正确的方向吗？

【问题讨论】：

$http() 应该允许您指定端口。

【参考方案1】：

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

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

sn-p 配置：

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

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

【讨论】：

我在 webpack web config 中添加了代理。还像您建议的那样将服务器网址更改为 /api/* 模式。但是当我尝试访问 /api/products 时问题仍然存在。 $http.get 方法尝试从 localhost:8080 端口访问 /api/products 。因此我收到 404 错误

请参考我在我的代码 github 代码库中提出的这个问题。 github.com/mal90/adApp/issues/3

您可以添加以下配置。我刚刚检查了代码并进行了测试。它工作得很好。 :) 代理：“/api/”：目标：“localhost:3000”，安全：假

正确。这样可行 。在我早期的代理解决方案中，我犯了一个错误。谢谢@Saurabh

这太棒了，而且是迄今为止解决整个 CORS 问题的最简单的解决方案。