Vue 프로젝트 에서 express 를 사용 하여 역방향 대 리 를 실현 합 니 다.

역방향 에이전트
앞 뒤 가 분 리 된 개발 에 문제 가 있 습 니 다. 제 전단 코드 는 제 컴퓨터 에 있 습 니 다.백 엔 드 자바 코드 는 다른 동료 에 게 있 습 니 다.전단 에서 백 엔 드 동료 가 제공 하 는 인 터 페 이 스 를 직접 호출 하 라 고 요청 하면 도 메 인 간 문제 가 발생 하여 접근 할 수 없습니다.이 럴 때 는 역방향 대리 로 문 제 를 해결 할 생각 을 하 게 된다.
역방향 프 록 시 란 전단 과 백 엔 드 서버 의 중간 에 프 록 시 서버 형식 으로 전단 에서 들 려 오 는 요청 을 받 아들 여 해당 하 는 서버 에 보 내 는 것 이다.크로스 오 버 문 제 를 해결 하 다.
nginx 라 는 물건 은 너무 커서 학습 원가 도 비교적 크다.우 리 는 API 의 인터페이스 에이 전 트 를 만 들 고 node 의 express 를 사용 하면 된다.
준비 작업
vue - cli 로 구 축 된 프로젝트 라면 이 준비 작업 은 필요 없습니다.dev - server. js 에서 직접 프 록 시 설정 을 하면 됩 니 다.
아래 의 이 가방 들 은 모두 npm 로 설치 해 야 하 며, 설치 되 지 않 으 면 먼저 설치 해 야 사용 할 수 있 습 니 다.
a 、 express 도입

  const express = require('express')
  const app = express()

b. 역방향 프 록 시 플러그 인 http - proxy - middlewar 도입

  const proxyMiddlewar = require('http-proxy-middlewar')

에이전트 설정
ok, 이 두 가 지 는 바로 역방향 대리 의 준비 작업 을 하 는 것 입 니 다.다음은 역방향 프 록 시 설정 을 시작 합 니 다.
우선, 알 아야 할 것 은 백 엔 드 서버 의 ip 과 포트 번호 입 니 다.

  const proxyPath = 'http://168.96.0.1:8080'   //   ，     IP        。  ip    

그리고 이 path 를 프 록 시 설정 항목 에 설정 합 니 다.

  const proxyOption = {target: proxyPath,changeOrigin: true}

이제 express 로 이 에이 전 트 를 쓰 면 돼 요.

app.use('/api', proxyMiddlewar(proxyOption))  //            
app.listen() //                 。 vue-cli             

여기 '/ api' 를 주의 하 세 요. 이것 은 우리 가 차단 해 야 할 요청 입 니 다.무슨 뜻 이 죠?
우리 전단 은 node 로 서버 를 시작 합 니 다. 보통 localhost: 8080 입 니 다.우리 전단 에 여러 가지 요청 이 있 을 수 있 습 니 다. 예 를 들 어 vue - router 는 우리 가 / blog 의 경로 가 있다 고 가정 하 는 것 처럼 localhost: 8080 / blog 는 / blog 라 는 경로 에 들 어가 해당 하 는 페이지 를 표시 합 니 다.
이와 같은 요청 은 당연히 역방향 대 리 를 통 해 백 엔 드 로 데 이 터 를 요청 하 는 것 을 원 하지 않 습 니 다.역방향 에이 전 트 를 통 해 백 엔 드 를 요청 하려 는 것 은 일반적으로 백 엔 드 의 인터페이스 이다.이 럴 때 앞 뒤 엔 드 에 규범 이 있어 야 합 니 다. 예 를 들 어 전단 에서 요청 한 / api 는 모두 백 엔 드 를 요청 하 는 인터페이스 입 니 다. 이것 은 앞 뒤 엔 드 의 연결 개발 에 편리 할 것 입 니 다.
그러면 위의 코드 처럼 차단 요청 의 context (위 는 / api) 를 설정 하여 / api 로 시작 하 는 경우 에 만 역방향 대 리 를 통 해 배경 으로 요청 할 수 있 습 니 다.

app.use('/api', proxyMiddlewar(proxyOption))

에 해당 하 다,...

 http://localhost:3000/api/..... —>  http://168.90.0.1:8080/api/....

백 스테이지 에 요청 하 는 역방향 에이전트 가 완료 되 었 습 니 다.
다음 에 또 다른 요청 방면 의 설정 참고 링크 가 있 습 니 다.https://github.com/chimurai/http-proxy-middleware