Ausführliche Erläuterung der domänenübergreifenden Verwendung des ProxyTable-Proxys

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der domänenübergreifenden Verwendung von ProxyTable-Proxy geben. Was sind die Vorsichtsmaßnahmen für die domänenübergreifende Verwendung von ProxyTable-Proxy? ein Blick.

Was ist domänenübergreifender Proxy?

Es gibt eine Same-Origin-Richtlinie zwischen Browsern, und aus Sicherheitsgründen werden verschiedene Domänen berücksichtigt Es dürfen keine Daten zwischen ihnen abgerufen werden, außer in einigen besonderen Beispielen. , , und andere Tags können domänenübergreifend sein, normalerweise jedoch in die Form von get. Wenn Sie remote auf die Axios von js zugreifen, wird die gleiche Ursprungsrichtlinie ausgelöst, es sei denn, Ihr Servercode legt den

Head er fest, um Ihnen den Zugriff darauf zu ermöglichen, was offensichtlich sehr ist unvernünftig! . Ist es heutzutage nicht beliebt, das Front-End und das Back-End zu trennen? Der Back-End-Code läuft weg und nur das Front-End bleibt übrig. Wie kann ich den zweidimensionalen Code im Front-End erhalten? dass die domänenübergreifende Verwendung sehr mühsam und schwierig ist und möglicherweise nicht möglich ist. Dann können Sie domänenübergreifende Proxys verwenden

Prinzip der domänenübergreifenden Proxys Der sogenannte Proxy besteht darin, das Back-End zum Senden von HTTP-Anfragen anstelle des Front-Ends zu verwenden. Genau wie beim Vue-Scaffolding müssen Sie zum Ausführen des Projekts npm run dev eingeben oder npm run start. Der Agent von vue scaffolding verwendet den Knoten, um http-Anfragen zu initiieren. Wäre es nicht einfach, wenn die Anfrage nicht vom Browser initiiert würde?

Wie funktioniert der Vue-Scaffolding-Proxy domänenübergreifend? Suchen Sie die Datei index.js im Konfigurationsordner, in der Datei befindet sich ein Entwickler, finden Sie darin die ProxyTable{} und ändern Sie sie

proxyTable: { '/api': { target: 'https://www.xxx.com/',//你要跨的域 changeOrigin: true, pathRewrite: { '^/api': '/api', }, headers:{ //这边可以堆headers进行设置 } }, }, Dabei ist „Ziel“ die Adresse, die Sie durch die Domäne überqueren möchten, und „/api“ ist der Pfad der nächsten Ebene unter der Domäne, die Sie durchqueren möchten, wie oben beschrieben, um die Dinge unter „https://www.xxx.com/api“ abzurufen, und dann „wir“. Führen Sie ein Ajax-Paket ein axios und führen Sie Ajax aus

import axios from 'axios' axios.get('/getMessage').then(()=>{}) Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwenden des eleganten Modus von CSS-Modulen

So schreiben Sie Komponenten in Vue

Ausführliche Erläuterung zur Verwendung von Webpack Hot Refresh und Hot Loading