Vue domänenübergreifendes normales Debuggen

Wenn im Vue-Projekt das Front-End und das Back-End Datenanforderungen oder -übermittlungen durchführen und das Back-End keine domänenübergreifenden Einstellungen hat, meldet das Front-End beim lokalen Debuggen des Codes „Nein“. „Access-Control-Allow-Origin“ header ist auf der angeforderten Seite vorhanden Ressource.“ Diese Art von domänenübergreifendem Fehler.

Wenn Sie normal lokal debuggen möchten, gibt es drei Lösungen:

1. Kopfzeile im Hintergrund ändern

Auf diese Weise können Daten domänenübergreifend abgefragt werden.

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

2. Verwenden Sie

jsonp, bereitgestellt von JQuery (Hinweis: JQuery wird in Vue eingeführt und Baidu wird allein verwendet)

Mit dieser Methode können auch domänenübergreifende Probleme gelöst werden.

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. Verwenden Sie die HTTP-Proxy-Middleware-Proxy-Lösung (das Projekt wird mit Vue-Cli-Gerüst erstellt)

Beispielsweise die angeforderte URL: „http://f.apiplus.cn/bj11x5.json“

1. Öffnen Sie config/index.js und fügen Sie den folgenden Code in ProxyTable hinzu:

2. Verwenden Sie „/api“ direkt, wenn Sie Daten mit Axios anfordern:

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

Verwenden Sie diese Methode, um domänenübergreifende Probleme zu lösen. Wenn Sie diese Methode beim Packen und Bereitstellen weiterhin verwenden, können Probleme auftreten. Die Lösung lautet wie folgt:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

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

Empfohlene Lektüre:

Detaillierte Erklärung der Verwendung von Ajax und JSONP

Detaillierte Erklärung der Verwendung von Polymorphismus in JS

Das obige ist der detaillierte Inhalt vonVue domänenübergreifendes normales Debuggen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!