从运行在不同端口的 Vue 应用程序调用节点快速服务器 API [英] Calling node express server API from Vue application running in a different port

问题描述

我最近开始学习 vue.js，目前正在使用 vue.js 和

Vue 应用程序使用 webpack 模板的默认配置在 http://localhost:8080/ 中运行.我正在尝试使用 $http 从 vue.js 文件中调用 /products api 端获取如下...

出口默认{name: '产品',方法: {得到:函数(){//获取请求这个.$http({网址:'/产品'，方法:'获取'}).then(函数(响应){console.log('ok');}，功能(响应){console.log('失败');});}}}

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

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

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

我可以在这里使用 API 代理吗?如果是这样，由于网络上可用的信息不多，有人可以指出我正确的方向吗?

解决方案

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

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

片段配置:

代理:{"/products": "http://localhost:3000/products"}

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

I recently started learning vue.js and currently using vue.js with vue-simple-webpack template , express and mongo to develop a simple application . I am using localhost to develop and test the application.

application front-end runs in port 8080 and the server is running in a different port (3000)

Here is my server.js where i have a simple api to get data from my 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));
    })
})

tested the server.js , it works . see below screenshot.

Vue application is running in http://localhost:8080/ using the webpack template's default configuration. i am trying to call the /products api end from the vue.js file using $http get as follows...

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');
            });
        }
    }
}

But i get the following error in the browser console.

As you can see , even though i am using the port 3000 in server.js , when i try access the /products api end , it actually goes through port 8080. Therefore it throws a 404 http error .

My question is how i can access the API end from within the front-end which runs in a different port. Is that even possible ?

Can i use API Proxying here . If so , can somebody point me in the correct direction on how to do it since there are not much info available on the web.

解决方案

You can use proxy configuration provided by webpack.

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

snippet config:

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

A better practice would be forwarding /api/* requests to http://host:port/api/* urls.

这篇关于从运行在不同端口的 Vue 应用程序调用节点快速服务器 API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！