Vue 프로젝트의 앞뒤 부분 연결(proxyTable을 사용하여 도메인 간 방식)

vue 로컬 프로젝트 디버깅 온라인 인터페이스에 크로스 필드 문제 발생
사용 방법: vue는 프로필에 proxyTable을 제공하여 크로스 필드, config 폴더의 index를 설정합니다.js 파일

dev: { // 

  //  
  assetsSubDirectory: 'static',

  //  
  assetsPublicPath: '/',

  //  ， API 
  //  'localhost:8080/api/xxx' 'http://xxxxxxx.com/xxx'
  proxyTable: {
   '/api': {
    target: 'http://xxxxxx.com', //  
    // secure: false, //  https ， 
    changeOrigin: true, //  ， 
    pathRewrite: {
     '^/api': '', //   http://xxxxxx.com:8080/xxx
    }
   }
  }
}

pathRewrite에서'^/api'의 역할에 관하여:
에이전트를 사용하려면 우선 이 연결을 에이전트로 해야 한다는 표지가 있어야 한다.그렇지 않으면 당신의 html, css, js 등 정적 자원이 모두 에이전트로 달려갈 수도 있습니다.그래서 우리는 인터페이스만 에이전트를 사용하고 정적 파일은 로컬을 사용한다.
'/api': {}, 내 인터페이스가'/api'로 시작해야 에이전트를 사용할 수 있다는 것을 node에게 알려주는 것입니다.그래서 너의 인터페이스는 이렇게 써야 한다./api/xx/xx.마지막 프록시 경로는http://xxxxxx.com/api/xx/xx.
그런데 틀렸어요. 제 정확한 인터페이스 경로에/api가 없어요.그래서 pathRewrite가 필요합니다. "^/api": "/api"를 제거합니다. 이렇게 하면 정확한 표지가 있을 뿐만 아니라 인터페이스를 요청할 때api를 제거할 수 있습니다.
보충 지식: vue2./vue.3.x 전역 실현(proxytable/proxy)
vue2.x
config/index.js

proxyTable: {
   '/api': {
    target: 'http://localhost:3000/', //  
    // secure: false, //  https ， 
    changeOrigin: true, //  ， 
    pathRewrite: {
     '^/api': ''
    }
   }
  },

vue3.x
vue.config.js

 module.exports = {
  devServer: {
   proxy: {
    '/api': {
     target: 'http://localhost:8080/',
     changeOrigin: true,
     ws: true,
     pathRewrite: {
      '^/api': '/static/mock'
     }
    }
   }
  }
 }

이상의 이 Vue 프로젝트의 앞뒤 부분 연결(proxy Table을 사용하여 크로스오버 방식을 실현하는 것)은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.