vue+자바 백 엔 드 디 버 깅 시 크로스 도 메 인 문 제 를 해결 하 는 방식

오늘 개발 과정 에서 문제 가 발생 하여 vue 코드 를 받 았 습 니 다.이 코드 의 일부 스타일 을 조정 할 계획 입 니 다.자바 백 엔 드 코드 는 이미 작성 되 어 온라인 에 배치 되 었 습 니 다.이 때 명령 행 이 vue 프로젝트 를 실행 할 때 접근 이 제한 되 어 데 이 터 를 찾 을 수 없습니다.도 메 인 접근 에 실패 한 문제 가 발생 했 습 니 다.이 때 어떻게 할 수 있 습 니까?
우선,크로스 도 메 인 방문 이 무엇 인지 알 아야 합 니까?
도 메 인 을 뛰 어 넘 는 것 은 브 라 우 저가 다른 사이트 의 스 크 립 트 를 실행 할 수 없다 는 것 을 말한다.이것 은 브 라 우 저의 동원 정책 으로 인해 발생 한 것 으로 브 라 우 저가 javascript 에 가 하 는 안전 제한 입 니 다.
동원 이란 도 메 인 이름,프로 토 콜,포트 가 모두 같다 는 것 을 말한다.예 를 들 어:
http://www.123.com/index.html 호출http://www.123.com/server.php (비 크로스 필드)
http://www.123.com/index.html 호출http://www.456.com/server.php (주 도 메 인 이름 이 다 릅 니 다:123/456,도 메 인 간)
http://abc.123.com/index.html 호출http://def.123.com/server.php (하위 도 메 인 이름 이 다 릅 니 다:abc/def,크로스 도 메 인)
http://www.123.com:8080/index.html 호출http://www.123.com:8081/server.php (포트 차이:8080/8081,크로스 필드)
http://www.123.com/index.html 호출https://www.123.com/server.php (프로 토 콜 이 다 릅 니 다:http/https,크로스 필드)
주의:localhost 와 127.0.0.1 은 모두 이 기 계 를 가리 키 지만 크로스 필드 에 속 합 니 다.
크로스 오 버 개념 을 알 게 된 후에 우 리 는 어떻게 그 를 해결 합 니까?
제 가 있 는 이곳 의 상황 은 이 렇 습 니 다.백 엔 드 는 서버 에 있 지만 vue 는 현지에서 실 행 됩 니 다.인터넷 에는 많은 크로스 도 메 인 프 록 시 도구 가 있 지만 모두 귀 찮 습 니 다.vue-cli 비계 도구 가 처리 해 주 었 기 때문에 조금 만 설정 하면 크로스 도 메 인 문 제 를 쉽게 해결 할 수 있 습 니 다.
config/index.js 파일 을 열 고 다음 코드 를 찾 습 니 다.

proxy Table:{}에 프 록 시 를 설정 합 니 다.설정 정 보 는 다음 과 같 습 니 다.

proxyTable: { 
 '/project_dzff/': { 
 target: 'http://120.92.45.71/', //   
 secure: false, 
 changeOrigin: false, 
 } 
 }, 

프 록 시 설정 을 한 후에 프로젝트 의 호출 인터페이스 주소 정 보 를 수정 하여 우리 가 설정 한 것 을 호출 하도록 합 니 다.

serverRoot: env === 'development' ? '/project_dzff' : 
env === 'production' ? '/project_dzff' : 
'https://debug.url.com' 

여 기 는 원래 방문 한 http://120.92.45.71/ 에서 방문 procject 로 조정 되 었 습 니 다.deff,즉 우리 가 정의 한 이름 입 니 다.
그림 과 같이 vue 프로젝트 를 실행 합 니 다.

이 때 는 기본적으로 로 컬 에 접근 하 는 데 성 공 했 습 니 다.이 때 는 로 컬 vue 프로젝트 를 사용 하여 서버 의 데 이 터 를 방문 할 수 있 습 니 다!
총결산