Vue-cli가 도메인 간 요청을 구현하는 방법에 대한 자세한 설명

이 글에서는 주로 Vue-cli로 만든 프로젝트에 대해 도메인 간 요청을 하는 방법을 자세히 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집기를 따라 살펴보겠습니다.

문제 설명:

Vue-cli를 사용하여 생성된 프로젝트의 경우 개발 주소는 localhost:8023이며 다음 위치에서 액세스해야 합니다. localhost:9000 인터페이스

이유 분석:

다른 도메인 이름 간의 액세스에 올바른 요청을 하려면 교차 도메인이 필요합니다. 일반적으로 백그라운드 구성이 필요한 크로스 도메인 방법이 많이 있습니다

그러나 Vue-cli로 생성된 프로젝트는 Node.js 프록시 서버를 직접 사용하여 크로스 도메인 요청을 구현할 수 있습니다

해결책:

인터페이스 주소는 원래 /form/save였지만 프록시 주소와 일치시키기 위해 앞에 /api를 추가하세요

axios를 사용하면 baseURL을 전역적으로 구성할 수 있으므로 URL을 하나씩 수정할 필요가 없습니다.

axios.defaults.baseURL = '/api'

추가 config>index.js의 개발에 있는 구성 항목 ProxyTable:

  proxyTable: {
   '/api': {
    target: 'http://127.0.0.1:9000/',
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/'
    }
   }
  },

여기서 '/api'는 일치하는 항목이자 대상입니다. 요청된 주소입니다

ajax에서는 '/api' 접두사가 URL에 추가되지만 원래 인터페이스에는 이 접두사

가 없으므로 pathRewrite를 통해 주소를 다시 작성해야 합니다. 그리고 접두사 '/api'를 '/'로 변환

자신의 인터페이스 주소에 '/api'와 같은 공통 접두사가 있는 경우 pathRewrite를 삭제할 수 있습니다

[관련 권장 사항]

1. 자바스크립트 무료 동영상 튜토리얼

2. easyUI 드롭다운 목록 클릭 이벤트 상세 예시

3. Webpack 개발 환경 크로스 도메인 예제 튜토리얼

4. JS를 이용한 배열 요소 삭제 방법 소개

5. nodejs6에서 koa2 프레임워크 사용

위 내용은 Vue-cli가 도메인 간 요청을 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!