vue-cli를 개발할 때 도메인 간 ajax에 대한 솔루션(강력 권장)

아래에서는 vue-cli를 개발할 때 ajax 크로스 도메인 솔루션에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

목적: vue-cli를 사용하여 빌드된 프로젝트를 개발할 때 데이터를 얻기 위해 백엔드 인터페이스에 액세스하려는 경우 도메인 간 문제가 발생합니다.

config/index.js

에서 다음을 구성하세요. 즉, ajax 요청을 할 때 주소에서 /api로 시작하는 모든 요청 주소는 대상 주소로 구문 분석되며 대상은 원하는 백엔드. 인터페이스 주소]

proxyTable: { 
‘/api': { 
target: ‘https://188.188.18.8‘, 
changeOrigin: true, 
pathRewrite: { 
‘^/api': ” 
} 
} 
}
“`

vue-resource 호출 예

this.$http.get('/api/v4/user/login', [options]).then(function(response){
  // 响应成功回调
}, function(response){
  // 响应错误回调
});

axios 호출

 axios({
  method: 'get',
  headers: {'Accept': '*/*'},
  url: '/api/v4/user/login',
  data: options
 })
 .then(function (response) {
  console.log(response.data)
 })
 .catch(function (error) {
  console.log(error)
 })

설명 원리 :

구성의

: 'target :'https : //188.188.8 '

위의 vue-resource 예에서 첫 번째 매개변수는 /api/v4/user/login

이며 로컬 서버에서 자동으로 https://188.188.18.8/v4/user/login으로 구문 분석됩니다. 우리에게 필요한 주소.

교차 도메인 원칙(로컬 파일은 원격 서버에 있는 것처럼 가장함):

요청이 시작되면 브라우저를 통해 페이지 열기: 로컬 서버의 주소(보통 localhost:8080 또는 127.0.0.1:8080) )이 요청을 수신한 후 요청 주소에 /api 문자열이 포함되어 있는 것으로 확인되면 로컬 서버는 요청 주소를 https://188.188.18.8/v4/(구성 주소) + user/login( 호출 방법의 자세한 주소).

동시에 로컬 서버의 주소는 localhost:8080에서 https://188.188.18.8/v4/로 변경됩니다. 결과는 다음과 같습니다.

로컬 파일은 대상 주소에 있는 것으로 간주됩니다. (https://188.188.18.8 /v4/) 현재 서버의 파일이 서버에 다른 것을 요청하는 경우 당연히 크로스 도메인이 아닙니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다. 관련 기사:

ajax드래그 앤 드롭 파일 업로드 구현(코드 포함)

Ajax를 통해 꺾은선형 차트를 동적으로 로드하는 방법(그래픽 튜토리얼)

위 내용은 vue-cli를 개발할 때 도메인 간 ajax에 대한 솔루션(강력 권장)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!