クロスドメインの問題と解決策

クライアントリクエストサービスのおおよそのプロセス

クロスドメインリクエスト

同一生成元グループポリシー:(同じソース：同じプロトコル、同じドメイン名（ホスト）、同じポート）Ajaxリクエストアドレスと現在のページのアドレスは、同じプロトコル、同じドメイン名、同じポートである必要があります。 Ajaxリクエストは正常に送信できます。3つのいずれかが異なる場合、リクエストはクロスドメインリクエストであると判断され、ブラウザはリクエストをブロックしてコンソールにエラーを報告します。

クロスドメインソリューション：CORS、サーバーリバースプロキシ、JSONP、ajax。

Ajaxはクロスドメインの問題を解決します:(ノードはクロスドメインの問題を解決します：サーバーリバースプロキシ）

	server.all("*",function(req,res,next){
    
    
	    //设置允许跨域的域名，*代表允许任意域名跨域
	    res.header("Access-Control-Allow-Origin","*");
	    //允许的header类型
	    res.header("Access-Control-Allow-Headers","content-type");
	    //跨域允许的请求方式 
	    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
	    if (req.method.toLowerCase() == 'options')
	        res.send(200);  //让options尝试请求快速结束
	    else
	        next();
	})

JSONPの原則：クロスドメインの問題を解決するテクノロジーは、実際のネットワーク環境に依存しません。Ajaxリクエストは同一生成元ポリシーの影響を受け、クロスドメインリクエストは許可されませんが、scriptタグのsrc属性のリンクはクロスドメインjsスクリプトにアクセスできます。この機能により、サーバーはJSONでデータを返さなくなりました。形式ですが、段落を返します。特定の関数を呼び出すjsコードはsrcで呼び出されるため、クロスドメインが実現されます。

JOSNPの動作メカニズム：スクリプトタグを動的に作成し、そのsrc属性を設定してhttpリクエストをサーバーに送信し、事前にコールバック関数を宣言します。コールバック関数の関数名は、コールバックリクエストパラメータを使用してバックエンドに渡されます。フロントエンドリクエストの後、コールバックリクエストのリクエストパラメータを取得し、関数を呼び出すJSコードセグメントをスプライスすると、フロントエンドに返されるデータが実際のパラメータの形式で存在します。フロントエンドはバックエンドから応答を受信し、バックエンドの内容を返します。JSコードとして実行します。つまり、関数を呼び出し、正式なパラメータを使用して、バックエンドから渡されるデータを受信します。

let oBody=document.querySelector("body");
function fn(data){
    
    
    console.log(data);//输出后端返回的数据
}

 // 动态创建script
 let script = document.createElement("script");
//向后端发送请求
script.setAttribute("src","请求路径?callback=fn&...");
// 将script插入到body后面
oBody.appendChild(script);