Nginx를 사용하여 Vue 개발 환경을 처리하는 방법

1. 요구 사항

쿠키를 올바르게 전달하고 SSO 테스트를 수행하려면 로컬 테스트 도메인 이름이 온라인 도메인 이름과 동일해야 합니다.

참고: SSO 로그인 후 4차 도메인 이름에 관련 쿠키가 추가되므로 로컬 테스트 도메인 이름과 온라인 인터페이스 도메인 이름이 동일해야 합니다.

2. 솔루션

온라인 도메인 이름이 로컬 호스트를 가리키도록 호스트 파일을 구성합니다.

127.0.0.1 product.xxx.xxx.com

해당 전달을 위한 nginx 구성:

server {
  listen    80;
  listen    [::]:80;
  server_name ${product.xxx.xxx.com};

  location /api {
    proxy_pass https://${ip.ip.ip.ip};
    proxy_set_header host $host;
  }

  location / {
    proxy_pass http://localhost:8080;
    proxy_set_header host $host;
  }  
}

잘못된 호스트 헤더를 방지하려면 vue.config.js를 구성하세요. 오류:

{
  devserver: {
    disablehostcheck: true
  }
}

위 내용은 Nginx를 사용하여 Vue 개발 환경을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!