Vue 크로스 도메인 일반 디버깅

vue 프로젝트에서 프런트엔드와 백엔드가 데이터 요청 또는 제출을 수행할 때 백엔드에 도메인 간 설정이 없으면 로컬에서 코드를 디버깅할 때 프런트엔드가 "아니요"를 보고합니다. 요청한 항목에 'Access-Control-Allow-Origin' header가 있습니다. resource." 이런 종류의 도메인 간 오류입니다.

로컬에서 정상적으로 디버깅하려면 다음 세 가지 해결 방법이 있습니다.

1. 백그라운드에서 헤더를 변경하세요

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式  

이런 방식으로 도메인 전체에 걸쳐 데이터를 요청할 수 있습니다.

2.

JQuery에서 제공하는 jsonp를 사용하세요. (참고: jquery는 vue에 도입되었으며 Baidu는 직접 사용합니다.)

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를 열고 ProxyTable에 다음 코드를 추가합니다.

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' 
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

ajax 및 jsonp 사용에 대한 자세한 설명

JS에서 다형성 사용에 대한 자세한 설명

위 내용은 Vue 크로스 도메인 일반 디버깅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!