uniapp domänenübergreifende Problemlösung

1. Was ist domänenübergreifend?

Aufgrund der Same-Origin-Richtlinieneinschränkungen des Browsers. Bei der Same-Origin-Richtlinie handelt es sich um eine Konvention, die die zentrale und grundlegendste Sicherheitsfunktion des Browsers darstellt. Wenn die Same-Origin-Richtlinie fehlt, können die normalen Funktionen des Browsers beeinträchtigt sein. Wissenswert: Domänenübergreifend wird nur im Browser angezeigt, und bei der Entwicklung von Applets und APPs treten keine domänenübergreifenden Probleme auf

2. Unter welchen Umständen wird es domänenübergreifend sein?

Wenn die Domänennamen unterschiedlich sind, wird menschlich ausgedrückt eine domänenübergreifende Überschneidung angezeigt. Nehmen Sie unten den Baidu-Domänennamen als Beispiel. Wenn einer der Domänennamen: Protokoll, Hostname, Domänenname und Port vom Domänennamen der aktuell besuchten Website abweicht, kommt es zu einer domänenübergreifenden Nutzung.

https://www.baidu.com:443

Wenn eine domänenübergreifende Verbindung auftritt, meldet die Browserkonsole einen Fehler, wie in der folgenden Abbildung dargestellt

Denken Sie daran: In diesem Artikel wird nur die Front-End-Lösung für domänenübergreifende Probleme beschrieben. Die Front-End-Lösung für domänenübergreifende Probleme ist nur bei lokaler Entwicklung wirksam. Die Projektversionslinie erfordert, dass der Front-End-Server einen Anforderungs-Proxy konfiguriert wie der Reverse-Proxy von Nginx oder das Back-End, um domänenübergreifende Anfragen zu ermöglichen

Die Lösung für Cross-Domain besteht darin, den Browser zu „betrügen“ oder Browserbeschränkungen zu löschen

Wenn Sie mehr über domänenübergreifende Probleme erfahren möchten, empfehlen wir Ihnen, sich die beiden folgenden Videolinks anzusehen, die sehr detailliert sind.

Domainübergreifendes praktisches Tutorial – Hochladen ... Erneut hochladen Abbrechen https://www.douyin.com/video/7162766714785058085

Domainübergreifendes praktisches Tutorial – Hochladen ... Erneut hochladen Abbrechen https://www.douyin.com/video/7163130203684834596

3. Die H5-Plattform des Uni-App-Projekts löst domänenübergreifende Lösungen

Methode 1: Verwenden Sie  den integrierten Browser von HBuilderX , der die domänenübergreifenden Einschränkungen des Browsers aufhebt.

Methode 2: Fügen Sie die h5-Konfiguration zur Datei manifest.json im Stammverzeichnis des Projekts hinzu und klicken Sie auf „Ich“  , um die Uni-App-Dokumentation anzuzeigen.

"h5" : {
    "devServer":{
        "proxy":{
            "^/api":{
                "target":"http://127.0.0.1:8081",
                "ws": true,
                "changeOrigin": true,
                "pathRewrite":{"^/api":"/api"}
            }
        }
    }
}

Beispiel für einen Seitenanforderungscode

uni.request({
	url:'/api/1.json',    // url 要与 proxy 匹配，不能写成 xx.com/api.1.json
	method:'GET',
	success: (res) => {
		console.log(res);
	}
})

 

4. Vue.js-Projekt domänenübergreifende Lösung

Fügen Sie die folgende Konfiguration zur Datei vue.config.js im Projektstammverzeichnis hinzu

/* 开发环境配置 */
devServer:{
    /* 代理目录 */
    proxy:{
        '^/api':{
            target:'http://127.0.0.1:8081',
            ws: true,
            changeOrigin: true
        }
    }
}

Seitenanforderungscode, nehmen Sie als Beispiel die Axios-Bibliothek

request.get('/api/1.json',{
    params
}).then(res=>{
    console.log(res)
})

Fünftens besteht die ultimative Lösung darin, die domänenübergreifenden Einschränkungen des Browsers zu löschen

Wenn es sich bei Ihrem Projekt nicht um ein technisches Projekt wie den jQuery-Technologie-Stack handelt, ist diese Methode die einfachste und unhöflichste

Nehmen Sie als Beispiel den Chrome-Browser

【Einstellschritte】

1. Erstellen Sie eine Desktop-Verknüpfung für Chrome
2. Klicken Sie mit der rechten Maustaste auf die Verknüpfung und klicken Sie auf [Eigenschaften], um das Bedienfeld [Eigenschaften] zu öffnen
3. chrome.exe Fügen Sie Startparameter (hinter) in [Ziel] im Bereich [Eigenschaften] hinzu

1. // 完整复制如下参数，注意空格

3. --args --disable-web-security --user-data-dir=C:\MyChromeDevUserData

Nachdem das Hinzufügen erfolgreich war, starten Sie den Chrome-Browser neu und es wird eine sofortige Kopie angezeigt, wie unten gezeigt