So erreichen Sie mit JS den einfachsten domänenübergreifenden Ansatz

Dieses Mal zeige ich Ihnen, wie Sie mit JS die einfachste domänenübergreifende Umsetzung erreichen und welche Vorsichtsmaßnahmen für die Verwendung von JS gelten, um die einfachste domänenübergreifende Umsetzung zu erreichen. Das Folgende ist ein praktischer Fall. Schauen wir uns das an.

Eines Tages kam jemand zu mir, um einen Plan zu machen, und fragte mich, was das Prinzip von COR sei. Ich wusste nur, dass JSONP domänenübergreifend ist.
„Ich bin gerade etwas beschäftigt, wir sehen uns später.“
Da ich schlau war, kehrte ich sofort zu meinem Arbeitsplatz, Baidu Baidu Baidu, zurück.

Same-Origin-Strategie

Es ist ein Klischee: Wenn man nicht aus meiner Familie stammt, darf man natürlich nicht mit den Dingen herumspielen.
Skripte, die nicht aus demselben Ursprung stammen, können nicht auf Seitenobjekte in anderen Domänen zugreifen oder diese bedienen (z. B. DOM usw.). Die gleiche Ursprungsrichtlinie erfordert drei gleiche Ursprünge, nämlich: dieselbe Domäne, dasselbe Protokoll usw gleichen Port.

Domänenübergreifende Methoden

In diesem Artikel werden nur jsonP und cors vorgestellt.

jsonP

<!-- 开发环境版本，包含了用帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Dies ist die Methode zum Einfügen von vue.js in das Vue-Dokument. Sie können sehen, dass das Skript-Tag JS-Dateien direkt von anderen Domänen anfordern kann. In diesem Fall können wir diese Funktion verwenden, um eine domänenübergreifende Umsetzung zu erreichen.

Erstellen Sie einen einfachen Server

Verwenden Sie nodejs+express, um einen einfachen Server zu erstellen. Ein paar Zeilen Code genügen.

const express = require('express');const app = express();
app.get('/user',(req,res)=>{  console.log('user');
  res.send(‘success’);
})
app.listen(3000,()=>{  console.log('start');
});

Starten Sie den Server. Schreiben Sie dann eine Testfunktion und versuchen Sie es zuerst mit Ajax.

function getUserAjax(){  let xhr= new XMLHttpRequest();
  xhr.open("GET","http://127.0.0.1:3000/user",true);
  xhr.send();
}

Führen Sie die getUserAjax-Funktion unter der Chrome-Konsole aus.

Sie können sehen, dass es abgelehnt wurde und der Browser keinen Erfolg hatte. Zu diesem Zeitpunkt müssen Sie jsonP verwenden. Weil das Skript-Tag selbst JS-Dateien domänenübergreifend anfordern kann.

function getUser(){  let dom = document.createElement('script');
  dom.src = "http://127.0.0.1:3000/user";  document.body.appendChild(dom);
}

Führen Sie getUser() in der Konsole aus.

Erfolg ist nicht definiert. Es ist ersichtlich, dass der Browser domänenübergreifend „Erfolg“ erzielt hat. Da der vom Skript-Tag geladene JS sofort ausgeführt wird und kein Erfolg definiert ist, wurde dieser Fehler gemeldet. Zu diesem Zeitpunkt war es klar. Wenn das Front-End eine Anfrage sendet, wird der Funktionsname, z. B. Callback, an das Backend übergeben und das Backend gibt diese Funktion zurück, Callback (Info). Auf diese Weise führt der Browser nach dem Empfang der Daten sofort die Rückruffunktion aus, genau wie die Rückruffunktion . Beginnen Sie sofort mit der Änderung:
Front-End-Code:

function callback(info){
  alert(info);
}function getUser(){  let dom = document.createElement('script');
  dom.src = "http://127.0.0.1:3000/user?callback=callback";  //url上指明回调函数的名字
  document.body.appendChild(dom);
}

Back-End-Code:

const express = require('express');const app = express();
app.get('/user',(req,res)=>{  let func = req.query.callback;
  res.send(func+'(' + '"success"'+')');
});
app.listen(3000,()=>{  console.log('start');
});

Erneutes Ausführen von getUser() wird erfolgreich angezeigt. So funktioniert jsonP. Der Hintergrund gibt eine JS-Funktion zurück, übernimmt Parameter und ruft die vom Frontend vorbereitete Funktion auf. Das heißt, der Effekt des Sendens von Anforderungen und Rückruffunktionen wird erreicht.

cors

Das ist noch einfacher. Dieser Fehler wurde gemeldet, als Ajax oben domänenübergreifend war. Auf der angeforderten Ressource war kein „Access-Control-Allow-Origin“-Header vorhanden.
Bringen Sie einfach „Access-Control-Allow-Origin“ mit, wenn der Server zurückkehrt. Er meint damit, welche Anfragequellen zulässig sind. Obwohl Sie nicht zu meiner Familie gehören, vertraue ich Ihnen dieses Mal und gebe Ihnen einen Schlüssel.
Ändern Sie den Hintergrundcode:

const express = require('express');const app = express();
app.get('/user',(req,res)=>{
  res.header("Access-Control-Allow-Origin", "*");  //设置返回数据的头，代表接受任意源的请求
  res.send('success');
});
app.listen(3000,()=>{
  console.log('start');
});

Rufen Sie dann das obige getUserAjax() auf der Konsole auf. Erfolg. Der Frontend-Code muss nicht geändert werden. Allerdings ist zu beachten, dass nicht alle Browser CORS unterstützen.

Vergleich zwischen jsonP und cors

cors hat den gleichen Zweck wie jsonP, ist aber leistungsfähiger als jsonP.
jsonP unterstützt nur GET-Anfragen, cors unterstützt alle Arten von HTTP-Anfragen. Der Vorteil von jsonP besteht darin, dass es ältere Browser unterstützt und Daten von Websites anfordern kann, die CORS nicht unterstützen.

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!

Empfohlene Lektüre:

Grundlegende Datentypen für das Lernen zur grundlegenden Verbesserung von js

So verwenden Sie JS zum Anpassen von Hash-Tabellen und sequentiellen Listen

Das obige ist der detaillierte Inhalt vonSo erreichen Sie mit JS den einfachsten domänenübergreifenden Ansatz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!