Domänenübergreifende Probleme mit ProxyTable im Vue-Cli-Projekt

Was ist domänenübergreifend?

Die Same-Origin-Richtlinie legt fest, dass Protokolle, Domänennamen und Ports zweier URLs, die unterschiedlich sind, als ursprungsübergreifend gelten. Dieser Artikel stellt Ihnen hauptsächlich eine Zusammenfassung der domänenübergreifenden ProxyTable-Probleme im vue-cli-Projekt vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Welche domänenübergreifenden Lösungen gibt es?

1.JSONP ist die Abkürzung für JSON mit Auffüllung (aufgefülltes JSON oder parametrisiertes JSON).

Das Prinzip von JSONP zum Implementieren domänenübergreifender Anforderungen besteht einfach darin, das -Tag dynamisch zu erstellen und dann den src von zu verwenden, ohne diesem zu unterliegen -Ursprungspolitik.

JSONP besteht aus zwei Teilen: Rückruffunktion und Daten. Die Callback-Funktion ist die Funktion, die auf der Seite aufgerufen werden soll, wenn die Antwort eintrifft. Der Name der Callback-Funktion wird normalerweise in der Anfrage angegeben. Bei den Daten handelt es sich um die JSON-Daten, die an die Rückruffunktion übergeben werden. Erstellen Sie dynamisch das -Tag, legen Sie seinen src fest und die Callback-Funktion wird in src festgelegt:

var script = document.createElement("script"); script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; document.body.insertBefore(script, document.body.firstChild); Auf der Seite wird der zurückgegebene JSON als Parameter an die Callback-Funktion übergeben , und wir übergeben die Rückruffunktion Kommen Sie und manipulieren Sie die Daten.

function handleResponse(response){ // 对response数据进行操作代码 console.log(response) } JSONP ist immer noch eine beliebte domänenübergreifende Methode. Obwohl JSONP bequem zu verwenden ist, gibt es auch einige Probleme:

Erstens lädt JSONP Code von anderen Domänen implementieren. Wenn die andere Domäne nicht sicher ist, besteht eine gute Chance, dass schädlicher Code in die Antwort eingeschmuggelt wird, und es gibt keine andere Möglichkeit, dies zu verfolgen, als den JSONP-Aufruf vollständig aufzugeben. Daher müssen Sie bei der Nutzung eines Webdienstes, der nicht von Ihnen selbst betrieben und gewartet wird, sicherstellen, dass dieser sicher und zuverlässig ist.

JSONP hat den Vorteil, direkt auf den Antworttext zuzugreifen, aber es ist nicht einfach zu bestätigen, ob die JSONP-Anfrage fehlgeschlagen ist, da das onerror-Ereignis des Skript-Tags von Browsern nicht allgemein unterstützt wird Es kann nur den Aufruf der GET-Methode unterstützen.

2.cros domänenübergreifend

Der gesamte CORS-Kommunikationsprozess wird automatisch vom Browser abgeschlossen und erfordert keine Benutzerbeteiligung. Für Entwickler gibt es keinen Unterschied zwischen CORS-Kommunikation und AJAX-Kommunikation aus derselben Quelle, und der Code ist genau derselbe. Sobald der Browser feststellt, dass die AJAX-Anfrage ursprungsübergreifend ist, fügt er automatisch einige zusätzliche Header-Informationen hinzu, und manchmal wird eine zusätzliche Anfrage gestellt, aber der Benutzer wird dies nicht spüren.

Daher ist der Server der Schlüssel zum Erreichen der CORS-Kommunikation. Solange der Server die CORS-Schnittstelle implementiert, ist eine Cross-Origin-Kommunikation möglich.

Ein häufig verwendeter vollständiger domänenübergreifender Header:

4.postMessage

5.WebSockets

Der Hintergrund stellt mir nur die Benutzeroberfläche zur Verfügung und ich kann den Hintergrund nicht ändern. Wie kann ich domänenübergreifend arbeiten?

In der tatsächlichen Arbeit ist die Zusammenarbeit zwischen Front-End und Back-End nicht so stillschweigend. Wenn das Backend mir nur die Schnittstelle bietet und das Backend nicht ändern kann, wie kann ich das tun? domänenübergreifend? In den Konfigurationsdateien im Vue-Projekt und im React-Projekt gibt es eine Proxy-Einstellung, die für domänenübergreifend in der Entwicklungsumgebung verwendet wird. Durch die Einrichtung wird die domänenübergreifende Nutzung ermöglicht. Für Projekte, die über vue-cli-Gerüst erstellt wurden, kann dies durch Ändern der Proxytabelle in index.js im Konfigurationsordner erreicht werden:

module.exports = { dev: { env: { NODE_ENV: '"development"' }, //proxy // 只能在开发环境中进行跨域，上线了要进行反向代理nginx设置 proxyTable: { //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add'即可 '/api': { target: 'http://news.baidu.com',//你要跨域的网址 比如 'http://news.baidu.com', secure: true, // 如果是https接口，需要配置这个参数 changeOrigin: true,//这个参数是用来回避跨站问题的，配置完之后发请求时会自动修改http header里面的host，但是不会修改别的 pathRewrite: { '^/api': '/api'//路径的替换规则 //这里的配置是正则表达式，以/api开头的将会被用用‘/api'替换掉，假如后台文档的接口是 /api/list/xxx //前端api接口写：axios.get('/api/list/xxx') ， 被处理之后实际访问的是：http://news.baidu.com/api/list/xxx } } }, Lassen Sie uns lokale Dienste verwenden, um zu testen, wie eine domänenübergreifende Demo durchgeführt wird

0. Mit vue-cli erstelltes Gerüst, npm run dev. Die Front-End-Portnummer lautet im Allgemeinen: http://localhost:8080

1. Ändern Sie den index.js-ProxyTable:{}-Code in der Konfigurationsdatei und ersetzen Sie ihn durch:

module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:8000', secure: true, changeOrigin: true, pathRewrite: { '^/api': '/api' } } }, 2. Schreiben Sie selbst ein Backend, verwenden Sie express+node.js, keine Einstellungen für Für jeden domänenübergreifenden Header lautet der Code wie folgt:

Beachten Sie, dass Sie im aktuellen Ordner im Voraus eine list.json-Datei vorbereiten müssen, um Daten zu lesen und zurückzugeben. fs.readFile('./list.json','utf8',cb)

import axios from 'axios'; axios.interceptors.response.use((res)=>{ return res.data; // 在这里统一拦截结果 把结果处理成res.data }); export function getLists() { return axios.get('/api/list'); } 4. Rufen Sie die Schnittstelle domänenübergreifend in der Komponente auf und drucken Sie die Daten aus

Fügen Sie die API in eine Datei ein, um die von der gedruckten Schnittstelle zurückgegebenen Daten zu testen

import {getLists} from '../../api/index' export default { async created(){ let dataList=await getLists(); console.log(dataList,"我请求的数据"); }, 5. Überprüfen Sie die Konsole und drucken Sie die Daten aus. Es gibt keine Fehlergarantie, was bedeutet, dass der Cross-Domain-Dienst erfolgreich ist

Die Entwicklungsumgebung wurde erfolgreich domänenübergreifend implementiert. Was soll ich tun, wenn sie online geht?

Wenn Sie online gehen, müssen Sie den Nginx-Reverse-Proxy einrichten und Umgebungsvariablen unterscheiden. Die spezifischen Einstellungen finden Sie im Bild:

Verwandte Empfehlungen:

Über die Einstellung von ProxyTable durch vue2.0 zur Verwendung von Axios für domänenübergreifende Anfragen