vue - cli 로 컬 환경 API 프 록 시 설정 및 크로스 도 메 인 해결

머리말
저 희 는 vue - cli 를 사용 하여 프로젝트 를 시작 할 때 npm run dev 저희 프로젝트 를 시작 할 수 있 습 니 다. 보통 저희 의 요청 주 소 는 localhost: 8080 으로 인터페이스 데 이 터 를 요청 합 니 다. localhost 는 쿠키 를 설정 할 수 없습니다.
vue - cli 설정 파일 에 프 록 시 를 설정 할 수 있 습 니 다. 도 메 인 을 뛰 어 넘 는 방법 은 많 습 니 다. 보통 배경 에서 설정 해 야 합 니 다.우 리 는 node. js 프 록 시 서버 를 통 해 도 메 인 간 요청 을 직접 실현 할 수 있 습 니 다.
vue proxy Table 인터페이스 크로스 필드 디 버 깅 요청
vue - cli 프로젝트 의 config 폴 더 아래 index.js 프로필 에서 dev 이렇게 생 겼 습 니 다.

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},   
    cssSourceMap: false
  }

서버 가 제공 하 는 인터페이스 가 이렇게 길 면 https://www.exaple.com/server_new/login 도 메 인 이름 을 추출 합 니 다 https://www.exaple.com.
config 에 새 파일 이름 proxyConfig.js :

module.exports = {
  proxy: {
        '/apis': {    // www.exaple.com   /apis
            target: 'https://www.exaple.com',  //     
            secure: false,  //    https  ，        
            changeOrigin: true,  //    
            pathRewrite: {
                '^/apis': ''   //  rewrite ,
            }              
        }
  }
}

자체 인터페이스 주소 에 '/ api' 라 는 통용 접두사 가 있다 면 https://www.exaple.com/api 삭제 할 수 있다.pathRewrite 폴 더 아래 config 도입 index.js:

var proxyConfig = require('./proxyConfig')

proxyConfig.js 폴 더 아래 config 의 index.js 변경:

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxy,
    cssSourceMap: false
  }
  

항목 다시 시작 dev:
이게 나 타 났 다 는 걸 알 게 될 거 예요.
이때 로 컬 API 에이 전 트 를 설 정 했 습 니 다.
로 컬 npm run dev 파일 수정hosts 파일 경 로 는 보통 window 이 고 C:\Window\System32\drivers\etc 는 폴 더 mac 로 가서 파일 을 열 고 이 단락 아래 /etc/hosts 를 설정 합 니 다.

# localhost name resolution is handled within DNS itself.
# 127.0.0.1       localhost
# ::1             localhost
127.0.0.1                   activate.adobe.com
127.0.0.1                   practivate.adobe.com
127.0.0.1                   lmlicenses.wip4.adobe.com
127.0.0.1                   lm.licenses.adobe.com
127.0.0.1                   na1r.services.adobe.com
127.0.0.1                   hlrcv.stage.adobe.com

localhost                   www.exaple.com            

해치우다
이때 우 리 는 도 메 인 문 제 를 완전히 해결 하고 로 컬 테스트 배경 에서 우리 로 컬 환경 설정 hosts 을 할 수 없 는 상황 을 해결 했다.
보충 하 다
이 글 이 발 표 된 지 오래 되 었 는데, 많은 사람들 이 나 에 게 개발 주소 가 무엇 인지, 온라인 주소 가 무엇 인지 물 었 다.
여기 서 보충 을 하고 여러분 에 게 영원히 편안 한 방법 을 가르쳐 드 리 겠 습 니 다.
프로젝트 주소 로 localhost 파일 을 작성 합 니 다.
다음 과 같다.

//      
const url = 'https://exaple.com';


let ROOT;
//     axios   ，  ROOT    ，          ，       ，       ROOT
if (process.env.NODE_ENV === 'development') {
    //          ，        ，   config    index.js dev.proxyTable 
    ROOT = "/apis"
} else {
    //        
    ROOT = url;
}

exports.PROXYROOT = url; //      
exports.ROOT = ROOT;

여기에 두 개의 인터페이스 가 노출 되 었 습 니 다. 하 나 는 대리 가 가리 키 는 주소, 즉 진정한 요청 주소 이 고 하 나 는 우리 cookie 에 게 요청 한 주소 입 니 다.
우 리 는 config.js 우리 가 설정 한 ajax 에 도입 하여 다음 과 같이 수정 할 것 입 니 다.

const config = require("../src/fetch/config");  //      
module.exports = {
  proxy: {
        [config.ROOT]: {    // www.exaple.com   /apis
            target: config.PROXYROOT,,  //     
            secure: false,  //    https  ，        
            changeOrigin: true,  //    
            pathRewrite: {
                [`^${config.ROOT}`]: ''   //  rewrite 
            }              
        }
  }
}

이후 생산 환경 이 든 개발 환경 이 든 우리 의 요청 주 소 를 더 이상 수정 할 필요 가 없다.
비교적 조잡 하 게 써 서 생각 을 정리 하지 못 하고 총 결 해 보 았 다.
즉, 이전에 우리 의 방법 은 ROOT 때 ajax 인터페이스 주 소 를 가 져 가 야 하 는데 proxyConfig.js 우리 가 npm run dev 에 있 을 때 ajax 인터페이스 주 소 를 실제 주소 /apis 로 바 꾸 는 것 이 매우 불편 하고 매번 바 꿔 야 한 다 는 것 이다.그러면 우 리 는 npm run build 을 통 해 환경 을 판단 하여 다른 인 터 페 이 스 를 도 출 한다.
자, 친구 가 잘 모 르 면 개인 적 으로 저 를 믿 고 현재 의 튜 토리 얼 을 다시 정리 하 겠 습 니 다. 제 가 보충 한 것 을 알 아 볼 수 있다 면 고치 지 않 겠 습 니 다. 하하.