웹pack+vue-cil에서proxyTable 설정 인터페이스 주소 프록시 작업

프로젝트 개발을 할 때 인터페이스 연결을 할 때 일반적으로 같은 도메인 이름으로 하고 크로스 도메인이 존재하지 않는 상황에서 인터페이스 연결을 한다. 그러나 우리가 현재 vue-cli를 사용하여 프로젝트 패키지를 진행할 때 우리는 로컬에서 서버를 시작한 후, 예를 들어 로컬 개발 서비스에서http://localhost:8080이런 접근 페이지, 그러나 우리의 인터페이스 주소는http://xxxx.com/save/index이러한 인터페이스 주소를 우리가 이렇게 직접 사용하면 크로스 필드의 요청이 존재하기 때문에 인터페이스 요청이 성공하지 못할 수 있습니다. 따라서 포장할 때 설정해야 합니다. config/index에 들어가겠습니다.js 코드는 다음과 같이 구성됩니다.

dev: {

 //  
 assetsSubDirectory: 'static',

 //  
 assetsPublicPath: '/',

 //  ， API 
 //  'localhost:8080/api/xxx' 'www.example.com/api/xxx'
 //  ：https://vuejs-templates.github.io/webpack/proxy.html
 proxyTable: {
  '/api': {
  target: 'http://xxxxxx.com', //  
  // secure: false, //  https ， 
  changeOrigin: true, //  ， 
  pathRewrite: {
   '^/api': ''
  }
  }
 },
 //   http://localhost:8080
 host: 'localhost', // can be overwritten by process.env.HOST

인터페이스 주소는 원래/save/index였지만 프록시 주소와 일치하기 위해 앞에/api를 추가했습니다. 따라서 인터페이스 주소는 이렇게 쓰면/api/save/index가 적용됩니다.
주의:'/api'는 일치하는 항목입니다. target은 요청된 주소입니다. aax의 URL에 접두사'/api'를 추가했습니다. 원래 인터페이스에는 이 접두사가 없기 때문에pathRewrite를 통해 주소를 다시 쓰고 접두사'/api'를'/'로 바꾸어야 합니다.만약 그 자체의 인터페이스 주소에'/api'라는 일반적인 접두사가 있다면, pathRewrite를 삭제할 수 있습니다.
보충 지식: 웹팩 -proxyTable의 설정이 개발 환경과 생산 환경에서의 원리에 대한 분석
앞말
우선,proxyTable은 로컬 개발 환경에서 인터페이스를 디버깅하는 데 사용되며, 로컬 크로스 필드의 문제를 해결하기 위한 것입니다. 로컬 주소는localhost:xxx/xxx이기 때문입니다.
온라인 생산 환경은 소용없어!!!
만약에 우리가 vue-cli 명령행 도구로 생성된 웹pack 프로젝트 템플릿을 사용한다면 config 폴더 아래에서 index를 쉽게 찾을 수 있습니다.js 파일.
로컬 구성 방법
만약 내가 요청하고자 하는 주소가
'http://xxx.com/scada/json/aa.tpl'
우리는 인덱스에 있다.js 파일에서 다음과 같은 코드를 찾았습니다. 저는 쓰기 방법을 추천했습니다. 뒤에 왜
그러면 제가 요청한 코드가 이렇습니다.

axios.get('/scada/json/aa.tpl').then((res) => {
 //........
})

그 원리를 살짝 설명해 보세요. 요청을 할 때proxy가 작용하고 인터페이스'/scada'앞에'를'http://xxx.com:123', 되다http://xxx.com:123/scada/json/aa.tpl'우리가 설정한 pathRewrite 필드에'/scada'를'/scada'로 써야 하기 때문에 요청 인터페이스는 'http://xxx.com:123/scada/json/aa.tpl'
계속 아래를 내려다보니 마른 물건이 아직 뒤에 있다
몇 가지 다른 작법을 가정하다
가설 1
만약 proxyTable 설정이 이렇다면

proxyTable: {
 '/scada': {
 target: 'http://xxx.com:123', 
 changeOrigin: true,
 pathRewrite: {
  '^/scada': '/'  
 }
 }

그러면 우리의 요청 코드는 반드시 이렇게 써야 한다

axios.get('/scada/scada/json/aa.tpl').then((res) => {
 //........
 // 
})

가설2
만약 proxyTable 설정이 이렇다면, 다시 이름을 짓는 것이다

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

그러면 우리의 요청 코드는 반드시 이렇게 써야 한다

axios.get('/api/scada/json/aa.tpl').then((res) => {
 //........
 // ， 
})

다시 아래를 내려다보고, 내가 추천한 작법의 진정한 우세를 보다
포장 온라인 문제
여기는 코드가 연결된 후와 인터페이스가 동원된 상황에서만 말하고 동원되지 않으면 전역이 존재한다. 여기는 이런 상황을 고려하지 않는다
만약 우리가 포장된 코드도 배치한다면http://xxx.com:123에
출시 후의 코드는 생산 환경이며,proxy가 없습니다
그러면 그는 어떻게 요청을 해석했습니까?예를 들면 아래의 이 요청.
axios.get('/scada/json/aa.tpl').then((res) => {//........
})
'/'은 루트 디렉터리의 뜻을 나타내기 때문에hostname +port + 요청한 주소, 즉 'http://xxx.com:123/scada/json/aa.tpl', 아무 문제 없어요. 인터페이스에서 요청할 수 있을 거예요.
그러면 만약에 위에서 제가 말한 가설 1 또는 가설 2의 작법을 따르면?
'그렇죠?'http://xxx.com:123/scada/scada/json/aa.tpl'와'http://xxx.com:123/api/scada/scada/json/aa.tpl'
그래서 가설 1과 가설 2는 포장하기 전에 요청 주소를 수정해야만 포장할 수 있어 불필요한 번거로움을 증가시켰다
이상의 웹pack+vue-cil에서proxyTable 설정 인터페이스 주소 프록시 조작은 여러분에게 공유된 모든 내용입니다. 참고해 주시고 저희를 많이 사랑해 주시기 바랍니다.