vue 크로스 도 메 인 해결 방법

2326 단어 vue크로스 필드
vue 프로젝트 에서 프론트 와 백 엔 드 가 데이터 요청 을 하거나 제출 할 때 백 엔 드 에 크로스 도 메 인 이 설정 되 어 있 지 않 으 면 프론트 로 컬 디 버 깅 코드 를 사용 할 때'No'Access-Control-Allow-Origin'header is present on the required resource.'라 는 크로스 도 메 인 오류 가 발생 합 니 다.

현지의 정상 적 인 디 버 깅 을 하려 면 해결 방법 은 세 가지 가 있다.
1.배경 변경 헤더

header('Access-Control-Allow-Origin:*');//         
header('Access-Control-Allow-Method:POST,GET');//         
이렇게 하면 도 메 인 을 넘 어 데 이 터 를 요청 할 수 있 습 니 다.
2.JQuery 가 제공 하 는 jsonp 를 사용 합 니 다.  (주:vue 에 jquery 도입,자체 바 이 두)

methods: { 
 getData () { 
 var self = this 
 $.ajax({ 
  url: 'http://f.apiplus.cn/bj11x5.json', 
  type: 'GET', 
  dataType: 'JSONP', 
  success: function (res) { 
  self.data = res.data.slice(0, 3) 
  self.opencode = res.data[0].opencode.split(',') 
  } 
 }) 
 } 
} 
이런 방법 을 통 해 도 메 인 을 뛰 어 넘 는 문 제 를 해결 할 수 있다.
3.http-proxy-middleware 대리 로 해결(프로젝트 는 vue-cli 비계 로 구축)
"예 를 들 어 요청 한url:“http://f.apiplus.cn/bj11x5.json"
1.config/index.js 를 열 고 proxy Table 에 다음 코드 를 추가 합 니 다.

proxyTable: { 
 '/api': { //  "/api"   "http://f.apiplus.c" 
 target: 'http://f.apiplus.cn', //    
 changeOrigin: true, //    
 pathRewrite: { 
  '^/api': 'http://f.apiplus.cn' //     
  } 
 } 
} 
2.axios 요청 데 이 터 를 사용 할 때"/api"를 직접 사용 합 니 다.

getData () { 
 axios.get('/api/bj11x5.json', function (res) { 
 console.log(res) 
 }) 
이 방법 을 통 해 크로스 도 메 인 을 해결 하고 포장 배 치 를 할 때 이런 방법 으로 문제 가 생 길 수 있다.해결 방법 은 다음 과 같다.

let serverUrl = '/api/' //      
// let serverUrl = 'http://f.apiplus.cn/' //        
export default { 
 dataUrl: serverUrl + 'bj11x5.json' 
} 
총결산
이상 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 vue 크로스 도 메 인 해결 방법 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.만약 에 궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 제때에 여러분 에 게 답 할 것 입 니 다!

좋은 웹페이지 즐겨찾기