Die Verwendung von JSONP zur Anforderung einer domänenübergreifenden Lösung

Aufgrund der Same-Origin-Richtlinie stoße ich bei der Front-End-Entwicklung häufig auf domänenübergreifende Probleme.
Was ist die Same-Origin-Richtlinie?
Das heißt, wenn die Host-Protokoll-Portnummern unterschiedlich sind, kommt es zu domänenübergreifenden Übergängen.
Warum gibt es eine Same-Origin-Richtlinie?
Die Same-Origin-Richtlinie ist eine wichtige Sicherheitsrichtlinie, die einschränkt, wie Dokumente von einem Ursprung oder von ihr geladene Skripte mit Ressourcen von einem anderen Ursprung interagieren können. Es hilft, schädliche Dokumente zu blockieren und mögliche Angriffsvektoren zu reduzieren.
Lösung des Problems
1. JSONP
Das Prinzip von JSONP besteht darin, Skript-Tags dynamisch zu erstellen. Weil das Skript nicht durch die Same-Origin-Richtlinie eingeschränkt ist.
Dann können Sie diese native Implementierungsmethode verwenden, um das domänenübergreifende Problem zu lösen

	let scripts = document.createElement('script');
    scripts.type = 'text/javascript';
    scripts.src = `https://api.apiopen.top/getJoke?page=1&count=2&type=video&callback=demo`;
    document.querySelector('body').appendChild(scripts);
	function demo(res){
    
    
        console.log(res)
    }

Wenn JSONP nicht verwendet wird, werden Daten wie {msg: 'helloworld'} normal zurückgegeben.
Nach der Verwendung von JSONP
muss die spezifische Methode nach der von uns angeforderten Adresse einen Rückrufparameter enthalten.
Nach Erhalt der Anfrage umschließt der Server die zurückzugebenden Daten mit diesem Parameterwert: demo({msg: 'helloworld'});
Wir können auch die Demo-Funktion sehen, die zum Empfangen der vom Server zurückgegebenen Informationen verwendet wird.
Ich habe diese Methode selbst gekapselt.

		let url = 'https://api.apiopen.top/getJoke?page=1&count=2&type=video';
        let demo;
        function addscript(url){
    
    
            return new Promise((resolve,reject) =>{
    
    
                let urls ;
                if(url.indexOf('?') > -1){
    
    
                  urls  = url+'&callback=demo';
                }else{
    
    
                  urls = url+'?callback=demo';
                }
                let scripts = document.createElement('script');
                scripts.type = 'text/javascript';
                scripts.src = urls;
                document.querySelector('body').appendChild(scripts);
                demo = (res) =>{
    
    
                    resolve(res);
                }
            })
        }
        //使用方法
        addscript(url).then(res =>{
    
    
            console.log(res)
        });

jquery ist JSONP, das direkt verwendet werden kann.

		let url = 'https://api.apiopen.top/getSingleJoke?sid=28654780';
        $.ajax({
    
    
            url:url,
            type:'get',
            dataType: 'jsonp',  // 请求方式为jsonp
            jsonpCallback: 'demo', // 自定义回调函数名
            data:{
    
    }
        })
        function demo(res){
    
    
            console.log(res)
        }

Nachfassen und aktualisieren. . .
Referenzdokument:
https://segmentfault.com/a/1190000017312269
https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy