Vue-cli ProxyTable이 개발 환경에서 도메인 간 문제를 해결하는 방법

이 글은 개발 환경에서 크로스 도메인 문제를 해결하기 위한 Vue-cli 프록시 테이블에 대한 자세한 설명을 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있을 만큼 실용적입니다. 저도 최근 Vue 기반으로 프로젝트를 개발할 때 이런 문제를 겪었는데, 양측 모두 많은 방법을 고민하고, 많은 정보를 확인하고, 결국 많은 매개변수를 추가하게 되었습니다. 내 로컬 호스트를 온라인에 접속할 때 사용할 도메인 이름에 매핑합니다.

오늘 코드를 보다가 갑자기 vue-cli의 config 파일에 ProxyTable이라는 매개변수가 있다는 걸 발견하고 이 이름을 보니 문제를 해결할 수 있을 것 같아 검색해봤습니다. , 그리고 물론입니다. vue-cli에서 사용하는 템플릿 플러그인인 vuejs-templates에는 API Proxy에 대한 안내사항이 있는데, 이 파라미터를 사용합니다.

https://vuejs-templates.github.io/webpack/proxy.html

이 매개변수는 주로 주소 매핑 테이블입니다. 예를 들어 요청하려는 주소를 설정하여 단순화할 수 있습니다. api .xxxxxxxx.com/list/1은 다음과 같이 설정할 수 있습니다:

proxyTable: {
 '/list': {
  target: 'http://api.xxxxxxxx.com',
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

이런 방식으로 URL을 작성할 때 api.xxxxxxxx.com/을 나타내려면 /list/1만 작성하면 됩니다. list/1.

그렇다면 크로스 도메인 문제를 어떻게 해결할까요? 실제로 위의 'list' 매개변수에는 부울 값을 수신하는changeOrigin 매개변수가 있습니다. 이 매개변수가 true로 설정되면 로컬 가상 서버가 귀하의 요청을 수신하고 귀하를 대신하여 요청을 보냅니다. 도메인 간이 아니어야 합니다. 문제는 물론 이것이 개발 환경에만 적용된다는 것입니다. 추가된 코드는 다음과 같습니다:

proxyTable: {
 '/list': {
  target: 'http://api.xxxxxxxx.com',
  changeOrigin: true,
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

vue-cli 이 설정은 사용하는 플러그인 http-proxy-middleware에서 옵니다.

github: https://github.com/chimurai/http-proxy - 미들웨어

더 자세히 알고 싶다면 플러그인 구성 지침을 읽어보세요. 매우 강력한 플러그인인 websocket도 지원하는 것 같습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

vue.js 프런트엔드 및 백엔드 데이터 상호 작용을 위한 데이터 제출 작업 정보

vue-cli에서 스타일러스를 사용할 수 없는 문제를 해결하는 방법

위 내용은 Vue-cli ProxyTable이 개발 환경에서 도메인 간 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!