JS を使用して最も単純なクロスドメインを実現する方法

今回は、JS を使用して最も単純なクロスドメインを実現する方法と、JS を使用して最も単純なクロスドメインを実現するための注意点について説明します。以下は実践的なケースです。

ある日、ある人が私のところに計画を立てに来て、cors の原理は何なのかと尋ねました。私はクロスドメインの jsonP しか知らなかったので、披露する機会を失いそうになりました。
「ちょっと忙しいので、また会いましょう」
賢いので、私はすぐに自分のワークステーションである Baidu Baidu Baidu に戻りました。

同一起源戦略

これは決まり文句です。私の家族ではない場合は、もちろん、物事に干渉することはできません。
同じオリジンからのものではないスクリプトは、他のドメイン (DOM など) のページ オブジェクトにアクセスしたり操作したりすることはできません。同じオリジン ポリシーでは、同じドメイン、同じプロトコル、同じポートという 3 つの同じオリジンが必要です。 。

クロスドメイン方式

この記事ではjsonPとcorsのみを紹介します。

jsonP

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

vueドキュメントにvue.jsを導入する方法です。scriptタグで他のドメインから直接JSファイルをリクエストできることがわかります。この場合、この機能を使用してクロスドメインを実現できます。

シンプルなサーバーを構築する

nodejs+expressを使用してシンプルなサーバーを構築します。数行のコードで十分です。

サーバーを起動します。次に、テスト関数を作成し、最初に ajax を試します。

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

Chrome コンソールで getUserAjax 関数を実行します。

拒否され、ブラウザが正常に成功しなかったことがわかります。この時点では jsonP を使用する必要があります。なぜなら、script タグ自体がドメインを越えて JS ファイルをリクエストできるからです。

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

コンソールで getUser() を実行します。

成功には定義がありません。ブラウザがドメイン全体で「成功」したことがわかります。 script タグによってロードされた JS はすぐに実行され、成功が定義されていないため、このエラーが報告されました。この時までにそれは明らかでした。フロントエンドがリクエストを送信すると、callback などの関数名がバックエンドに渡され、バックエンドはこの関数 callback(info) を返します。このようにして、ブラウザーはデータを受信すると、コールバック関数と同様に、すぐにコールバック関数を実行します。すぐに変更を開始します。
フロントエンド コード:

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

バックエンド コード:

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);
}

getUser() を再度実行すると、成功したことがポップアップ表示されます。これが jsonP の仕組みです。バックグラウンドは JS 関数を返し、パラメータを受け取り、フロントエンドによって準備された関数を呼び出します。つまり、リクエストとコールバック関数を送信した効果が得られます。

cors

これはさらに簡単です。このエラーは、上記の ajax がクロスドメインである場合に報告されました。要求された リソース に「Access-Control-Allow-Origin」ヘッダーが存在しません。
サーバーが戻ったら、「Access-Control-Allow-Origin」を持ってくるだけです。彼が言いたいのは、どのリクエストのソースが許可されるかということです。あなたは私の家族ではありませんが、今回はあなたを信頼して鍵をお渡しします。
バックグラウンド コードを変更します:

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');
});

次に、コンソールで上記の getUserAjax() を呼び出します。成功。フロントエンドのコードを変更する必要はありません。ただし、すべてのブラウザが cors をサポートしているわけではないことに注意してください。

jsonPとcorsの比較

corsはjsonPと同じ目的を持っていますが、jsonPよりも強力です。
jsonP は GET リクエストのみをサポートしますが、cors はすべてのタイプの HTTP リクエストをサポートします。 jsonP の利点は、古いブラウザをサポートし、CORS をサポートしていない Web サイトからデータを要求できることです。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JS の基本改善学習のための基本データ型

JSを使用してハッシュテーブルとシーケンシャルリストをカスタマイズする方法

以上がJS を使用して最も単純なクロスドメインを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。