프런트엔드 구성 리버스 프록시 proxyTable

Tip: 글 작성 후 자동으로 목차가 생성될 수 있으며, 생성 방법은 오른쪽 도움말 문서를 참고하시면 됩니다.

1. 프록시테이블을 사용하는 이유

1. 브라우저는 동일한 출처 정책을 가지고 있으며 교차 도메인 액세스를 허용하지 않습니다.소위 교차 도메인은 (프로토콜, 도메인 이름 및 포트 중 하나가 다름)입니다.
2. 일반적인 프로젝트 개발 환경에서는 도메인 간 문제가 자주 발생합니다. 예를 들어 백엔드 동료와 로컬 공동 디버깅을 수행해야 하는 경우 리버스 프록시를 사용하여 두 컴퓨터 간의 교차 도메인 문제를 해결해야 합니다.

둘째, proxyTable을 사용하여 데이터 함수 및 메서드를 처리하는 방법입니다.

계속해서 vue 관련 프로젝트를 예로 들어보자(현재 사용하고 있는 기술 스택은 vue이다) 우선 루트 디렉터리의 config 폴더 아래에서 index.js 파일을 찾아야 한다. 개발 환경에서 사용하고 있기 때문에 dev에서 구성하는 것이 당연합니다.

dev: {
    
    
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
    
    
      '/': {
    
    
      	// target表示目标接口域名
        target: 'www.666.com', //举个例子具体要看后端给的
        // target: 'http://172.20.225.45:9033/api/zy/rental/house/web/',  //需要和哪个后端连接调试就在这里新增修改
        // target: 'http://192.168.209.123:9033/api/zy/rental/house/web/',
        changeOrigin: true // 是否跨域
      }
    },
    host: '0.0.0.0', // 本地访问
    // host: 'localhost',
    port: 8086,
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,

    devtool: 'cheap-module-eval-source-map',

    cacheBusting: true,

    cssSourceMap: true
  },

3. 인터페이스 주소에 통일된 프로젝트 이름이 없는 경우

백그라운드에서 프런트 엔드로 반환된 인터페이스에 통합 프로젝트 이름이 없으면 어떻게 됩니까? 다음과 같이 먼저 인위적으로 인터페이스 주소 앞에 사용자 정의 프로젝트 이름을 추가한 다음 인터페이스를 다시 작성합니다.

//先人为给接口地址前面加上一个自定义的项目名
let someApi = '/api' + '/xx/xx';

dev: {
    
    
  ...
  proxyTable: {
    
    
    '/api': {
    
    
      target: 'http://www.abc.com',  //目标接口域名
      changeOrigin: true,  //是否跨域
      pathRewrite: {
    
    
        '^/api': '/'   //重写接口
      }
    }
  }
  ...
}

넷째, proxyTable의 원리

동일 출처 정책은 브라우저가 따라야 할 표준이며, 서버가 서버에서 요청하는 경우 동일 출처 정책을 따를 필요가 없습니다. vue-cli의 proxyTable은 기본적으로 서버 dev-server를 로컬에서 여는 http-proxy-middleware 미들웨어를 사용하며 모든 요청은 여기를 통해 전달됩니다. 즉, 브라우저의 전송 요청은 프록시에 의해 전달됩니다. 프록시 서버로 이동합니다. 그런 다음 프록시 서버는 도메인 간 문제를 해결하기 위해 대상 서버에 요청을 보냅니다.


웹 측뿐만 아니라 작은 프로그램에서도 도메인 간 문제가 발생하는 시나리오가 많이 있습니다. 위에서 사용한 노드 미들웨어 프록시 외에도 jsonp, cors, websocket, nginx 리버스 프록시 등 다양한 솔루션이 있습니다. 실제 프로젝트 개발에서는 동일한 출처 정책을 피하기 위해 더 많은 에이전트가 사용됩니다.