Вызов API экспресс-сервера узла из приложения Vue, работающего на другом порту

Недавно я начал изучать vue.js и в настоящее время использую vue.js с vue-simple-webpack шаблон, экспресс и монго для разработки простого приложения. Я использую 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/ с использованием конфигурации шаблона веб-пакета по умолчанию. я пытаюсь вызвать конец API /products из файла vue.js, используя $http get следующим образом...

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, когда я пытаюсь получить доступ к концу API /products, он фактически проходит через порт 8080. Поэтому он выдает ошибку HTTP 404 .

Мой вопрос заключается в том, как я могу получить доступ к концу API из внешнего интерфейса, который работает в другом порту. Это вообще возможно?

Могу ли я использовать здесь API-прокси . Если да, может ли кто-нибудь указать мне правильное направление, как это сделать, поскольку в Интернете не так много информации.


person Malik    schedule 17.10.2017    source источник
comment
$http() должен позволить вам указать порт.   -  person theGleep    schedule 17.10.2017


Ответы (1)


Вы можете использовать конфигурацию прокси, предоставленную webpack.

Документы: https://webpack.js.org/configuration/dev-server/#devserver-proxy

фрагмент конфигурации:

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

Лучшей практикой будет перенаправление запросов /api/* на http://host:port/api/* URL-адреса. .

person Saurabh Nemade    schedule 17.10.2017
comment
Я добавил прокси в веб-конфигурацию веб-пакета. Также изменены URL-адреса сервера на шаблон /api/*, как вы предложили. Но проблема все еще существует, когда я пытаюсь получить доступ к /api/products . метод $http.get пытается получить доступ к /api/products через порт localhost:8080. поэтому я получаю ошибку 404 - person Malik; 18.10.2017
comment
Пожалуйста, обратитесь к этой проблеме, которую я поднял в моем кодовом репозитории github. github.com/mal90/adApp/issues/3 - person Malik; 18.10.2017
comment
Вы можете добавить следующую конфигурацию. Я только что проверил код и проверил. Это работало нормально. :) proxy: { /api/: { target: localhost:3000, secure: false } } - person Saurabh Nemade; 18.10.2017
comment
Верный . это работает . В моем раннем решении с прокси я допустил ошибку. Спасибо @Saurabh - person Malik; 18.10.2017
comment
Это блестящее и, безусловно, самое простое решение всей этой проблемы CORS. - person Marco; 27.01.2021