vue-cli를 사용하여 인터페이스 프록시를 구성하는 방법

이 글은 주로 vue-cli 인터페이스 프록시 구성을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분과 공유하고 참고용으로 제공하겠습니다. 편집기를 따라 살펴보겠습니다

이 기사에서는 vue-cli 인터페이스 프록시 구성을 소개하고 모든 사람과 공유합니다. 세부 사항은 다음과 같습니다.

인터페이스 프록시를 구성할 때 일부 학생들은 인터페이스가 왜 필요한지에 대해 질문할 것입니다. 구성이 성공한 후에도 여전히 차단됩니다. 실제로 프록시는 성공했지만 인터페이스 액세스 주소 규칙이 명확하지 않습니다.

다음은 로컬 테스트를 밤으로 사용하여 소개합니다

여기에서는 일부 기본 작업을 소개하지 않습니다.

vue-cli config 폴더에서 index.js를 찾으세요. 이것은 인터페이스 규칙 파일과 동일한 디렉터리에 ProxyConfig.js를 생성하는 구성입니다. 일부 학생들은 원본 파일에서 직접 수정하는 데 익숙합니다. 새 파일을 사용하는 것이 좋습니다:

module.exports = {
  proxyList: {
    '/api': {
      target: 'http://localhost:3000',  （这里是代理接口的位置）
      changeOrigin: true,（允许跨域，如果这不写，调用接口接口时会有跨域错误说缺少请求头）
      pathRewrite: {'^/api': '' } （路由规则下面详细介绍）
    }
  }
}

******라우팅 규칙**********

위 코드가 실행된 후 '/api'가 표시되는 한 인터페이스에서 자동으로 우리가 설정한 주소가 됩니다. 그런 다음 설정할 때 인터페이스 작성 표준을 표준화할 수 있습니다. PathRewrite {'^/api ': '' }는 원하는 경로를 나타냅니다. 비어 있는 경우 인터페이스가 구문 분석 중에 $http.get('/api/good')을 작성하면 서버 측에서 /good에 액세스할 때 일치하는 해당 경로가 없는 경우를 볼 수 있습니다. 이때 서버에서는 클라이언트에 오류가 표시됩니다. 포트 번호는 여전히 클라이언트의 포트 번호이므로 많은 학생들이 마찬가지로 {' ^/api': '를 설정하면 작동하지 않는다는 환상을 갖습니다. /api' } 그런 다음 서버 측에서 /api/goods의 인터페이스 액세스를 볼 수 있습니다. 이는 /api가 자동으로 프록시 주소로 확인될 뿐만 아니라 서버 측에서 경로로 표시된다는 것을 의미합니다.

또한 라우팅 규칙을 설정할 때 구분 기호에 주의하세요. 일부 학생들은 'http://localhost:3000/'과 같이 대상을 작성하는 것을 좋아합니다. 이 경우에는 이름을 지정할 때 '/'도 추가해야 하며, 인터페이스가 올바른지 확인하려면 라우팅 규칙에도 '/'를 추가해야 합니다. 인터페이스를 요청할 때 '/api//goods'와 같은 추가 구분 기호가 있는지 확인하세요.

설정 후 index.js에 ProxyConfig.js를 도입하고 ProxyTable을 설정하면 설정이 완료됩니다

const proxyConfig = require('./proxyConfig')
module.exports = {
  dev: {
    env: require('./dev.env'),
    host: 'localhost',
    port: 8188,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxyList,
    cssSourceMap: false,
  }
 }

요청 시 이렇게 적어주세요

axios.get('/api/goods').then((res)=>{console.log(res.data);}}).catch((err)=>{console.log(err);}})

위 내용은 모두를 위해 정리한 내용이니 많은 분들께 도움이 되었으면 좋겠습니다 미래에.

관련 기사:

Vue2.0 상위 구성 요소와 하위 구성 요소 간의 디스패치 메커니즘 구현 정보(자세한 튜토리얼)

히스토리를 사용하여 반응 라우터에서 라우팅을 제어하는 ​​방법(자세한 튜토리얼)

방법 jqprint를 사용하여 페이지 인쇄 내용

js를 사용하여 WeChat을 구현하여 Alipay를 호출하여 빨간 봉투 수신(자세한 튜토리얼)

Gulp를 사용하여 정적 웹 페이지 모듈화를 구현하는 방법은 구체적으로 무엇입니까?

vue.js에 vux를 통합하여 풀업 로딩 및 풀다운 새로 고침을 구현하는 방법

위 내용은 vue-cli를 사용하여 인터페이스 프록시를 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!