다른 포트에서 실행중인 Vue 애플리케이션에서 노드 익스프레스 서버 API를 호출합니다.

Question

저는 최근 vue.js를 배우기 시작했으며 현재 vue-simple-webpack 템플릿, express 및 mongo로 vue.js를 사용하여 간단한 애플리케이션을 개발했습니다. localhost를 사용하여 응용 프로그램을 개발하고 테스트합니다.

애플리케이션 프런트 엔드 포트 8080에서 실행되고 서버는 다른 포트 (3000) 여기

이다에서 실행되는 내 난 내 localdb

에서 데이터를 얻을 수있는 간단한 API를 server.js

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 테스트를 거쳤습니다. 아래 스크린 샷을 참조하십시오.

뷰 응용 프로그램은 웹팩 템플릿의 기본 구성을 사용 http://localhost:8080/에서 실행됩니다. 내가

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

... $ HTTP GET 다음을 사용하여 vue.js 파일에서 /products API 종료를 호출하려고하지만 난 브라우저 콘솔에서 다음과 같은 오류가 발생합니다. 내가 /products API를 끝에 액세스하려고 할 때 내가, server.js에서 포트 3000을 사용하고 있더라도

당신이 볼 수 있듯이, 그것은 실제로 포트 8080 통해 간다. 따라서 http 오류가 발생합니다.

제 질문은 다른 포트에서 실행되는 프런트 엔드 내에서 API 끝에 액세스하는 방법입니다. 그게 가능한가?

여기서 API Proxying을 사용할 수 있습니까? 그렇다면 웹에서 사용할 수있는 정보가 많지 않으므로 누군가가 올바른 방향으로 나를 가리킬 수 있습니까?

Answer 1

webpack에서 제공하는 프록시 구성을 사용할 수 있습니다.

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

조각의 설정 :

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

더 좋은 연습이 전달 될 것/http://host:port/api/ * URL에 대한 API/* 요청.