아래에서는 vue-cli를 개발할 때 ajax 크로스 도메인 솔루션에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.
목적: vue-cli를 사용하여 빌드된 프로젝트를 개발할 때 데이터를 얻기 위해 백엔드 인터페이스에 액세스하려는 경우 도메인 간 문제가 발생합니다.
config/index.js
에서 다음을 구성하세요. 즉, ajax 요청을 할 때 주소에서 /api로 시작하는 모든 요청 주소는 대상 주소로 구문 분석되며 대상은 원하는 백엔드. 인터페이스 주소]
proxyTable: { ‘/api': { target: ‘https://188.188.18.8‘, changeOrigin: true, pathRewrite: { ‘^/api': ” } } } “`e
vue-resource 호출 예
this.$http.get('/api/v4/user/login', [options]).then(function(response){ // 响应成功回调 }, function(response){ // 响应错误回调 });e
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를 통해 꺾은선형 차트를 동적으로 로드하는 방법(그래픽 튜토리얼)
jquery 🎜ajax🎜 구현 파일 업로드 기능(코드 포함) 🎜🎜위 내용은 vue-cli를 개발할 때 도메인 간 ajax에 대한 솔루션(강력 권장)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!