Débogage normal inter-domaines Vue

Dans le projet vue, lorsque le front-end et le back-end effectuent des demandes ou des soumissions de données, si le back-end n'a pas de paramètres inter-domaines, le front-end signalera « Non » lors du débogage du code localement. 'Access-Control-Allow-Origin' header est présent sur le demandé ressource." Ce genre d'erreur inter-domaines.

Si vous souhaitez déboguer normalement localement, il existe trois solutions :

1. Changer l'en-tête en arrière-plan

De cette manière, les données peuvent être demandées sur plusieurs domaines.

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

2. Utilisez

jsonp fourni par JQuery (Remarque : jquery est introduit dans vue et Baidu est utilisé par Baidu)

Cette méthode peut également résoudre des problèmes inter-domaines.

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. Utilisez la solution proxy http-proxy-middleware (le projet est construit à l'aide de l'échafaudage vue-cli)

Par exemple, l'url demandée : "http://f.apiplus.cn/bj11x5.json"

1. Ouvrez config/index.js et ajoutez le code suivant dans proxyTable :

2. Utilisez "/api" directement lorsque vous demandez des données à l'aide d'axios :

proxyTable: { 
 '/api': { //使用"/api"来代替"http://f.apiplus.c" 
 target: 'http://f.apiplus.cn', //源地址 
 changeOrigin: true, //改变源 
 pathRewrite: { 
  '^/api': 'http://f.apiplus.cn' //路径重写 
  } 
 } 
}

Utilisez cette méthode pour résoudre les problèmes inter-domaines, et des problèmes peuvent survenir si vous continuez à utiliser cette méthode lors de l’empaquetage et du déploiement. La solution est la suivante :

getData () { 
 axios.get('/api/bj11x5.json', function (res) { 
 console.log(res) 
 })

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

let serverUrl = '/api/' //本地调试时 
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时 
export default { 
 dataUrl: serverUrl + 'bj11x5.json' 
}

Lecture recommandée :

Explication détaillée de l'utilisation d'ajax et jsonp

Explication détaillée de l'utilisation du polymorphisme dans JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!