Vue의 역방향 프록시를 사용하는 이유는 무엇입니까?

역방향 프록시는 실제 서버를 숨기고 실제 URL을 직접 요청하여 발생하는 도메인 간 문제를 우회할 수 있으므로 일반적으로 사용되는 도메인 간 문제를 방지하려면 역방향 프록시를 사용해야 합니다. 프런트엔드와 백엔드 별도 개발 시나리오에서 프런트엔드는 백엔드 인터페이스에 연결하고 동일한 소스에서 역방향 프록시 서버로 요청을 보내야 합니다.

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

Vue의 역방향 프록시를 사용하는 이유

역방향 프록시 사용 시나리오

프런트엔드와 백엔드를 별도로 개발하는 시나리오에서는 프런트엔드(정적 페이지 제공)에 서버가 있고 그 위에 서버가 있습니다. 백엔드(인터페이스 제공)

이것 프론트엔드가 백엔드 인터페이스에 연결해야 할 때 크로스 도메인 문제가 발생합니다

출판 환경에서 크로스 도메인 문제가 있다면 nginx를 사용하세요

프런트엔드 코드와 백엔드 코드가 동일한 서버에 있으면 크로스 도메인 문제가 없습니다

Cross-domain Solution

jsonp(프론트엔드 솔루션)

CORS(백엔드 솔루션) ): 교차 출처 리소스 공유

역방향 프록시(프런트 엔드 솔루션)

역방향 프록시란 무엇입니까

역방향 프록시 브라우저가 여전히 동일한 출처에 속하도록 실제 서버를 숨깁니다

역방향 프록시 원칙

요청을 위조하여 동일한 출처에서 http 요청을 한 다음 동일한 출처에서 역방향 프록시 서버로 요청을 전송하여 프록시 서버에서 실제 URL을 요청함으로써 직접 요청으로 인해 발생하는 도메인 간 문제를 우회합니다. 실제 URL

역방향 프록시 구성

Vue-cli3 역방향 프록시

프로젝트 루트 디렉터리 .config.js 파일에 새 vue 생성

구성 코드:

module.exports = {undefined
  lintOnSave:false,
  devServer:{undefined
    proxy: { 
      '/api': { 
             target: 'http://localhost:80',
             changeOrigin: true, 
             pathRewrite: {undefined
                '^/api': ""   
              }，
        '/apidouban': {undefined
             target: 'http://localhost:3001',
             changeOrigin: true, 
             pathRewrite: {undefined
                '^/apidouban': ""
              }
          }
      }
   }
}

역방향 프록시 실행 프로세스:

변환 /api in axios 액세스 주소 + /api:

(예: http:localhost:9000/api/goods 변환 http://localhost:80/api/goods용 가상 서버 생성)

                                                   ' out out의         ‐       ‐ ‐ ​                                                   using using               out out through through off 's' 's' through ‐ to ‐‐‐‐‐ 그리고 ​ ​튜토리얼

》】

위 내용은 Vue의 역방향 프록시를 사용하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!