Heim > Web-Frontend > H5-Tutorial > Hauptteil

Vue domänenübergreifende Lösung

一个新手
Freigeben: 2017-10-16 10:43:56
Original
2320 Leute haben es durchsucht

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 „Keine Zugriffskontrolle-Zulassen“. -Origin'-Header ist auf der „beim lokalen Debuggen des Codes. angeforderten Ressource“ vorhanden. Dieser domänenübergreifende Fehler.

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

1. Ändern Sie den Header im Hintergrund


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

Auf diese Weise können Sie Daten domainübergreifend anfordern.

2. Verwenden Sie das von JQuery bereitgestellte JSONP (Hinweis: JQuery wird in Vue eingeführt und Baidu wird allein verwendet)


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(',')  
      }  
    })  
  }  
}
Nach dem Login kopieren

Diese Methode kann Lösen Sie auch das Problem der Querverbindungsdomänenprobleme.

3. Verwenden Sie die Proxy-Lösung http-proxy-middleware (das Projekt wird mit vue-cli-Gerüst erstellt)

Zum Beispiel 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:


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

2 axios zum Anfordern von Daten Verwenden Sie „/api“:


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

Verwenden Sie diese Methode, um domänenübergreifende Probleme zu lösen. Wenn Sie diese Methode beim Packen und Bereitstellen immer noch verwenden, treten Probleme auf wird entstehen. Die Lösung lautet wie folgt:


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

Definieren Sie eine Server-URL, um unsere „/api“ beim Debuggen zu ersetzen. Beim Packen müssen Sie nur „http://“ ersetzen. www. Ersetzen Sie einfach „/api“ durch „xxx.com“.

Das obige ist der detaillierte Inhalt vonVue domänenübergreifende Lösung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage