導入
クロスドメインは、私が毎日のインタビューでよく尋ねる質問です。この用語は、フロントエンドの世界で頻繁に登場します。主な理由は、セキュリティの制限（同じオリジナル戦略、つまりJavaScriptまたはCookieが同じドメインの下のコンテンツのみにアクセスできる）によるものです。毎日のプロジェクト開発中にドメインを横断する操作を実行する必要があるため、ドメインクロス機能もフロントエンジニアの基本的なスキルの1つです。
ほとんどのクロスドメインソリューションと同様に、JSONPも私の選択ですが、PMが変更される必要があり、送信されるデータの量が比較的大きく、GETフォームを処理できないため、特定の関数を投稿するために特定の関数を変更する必要があります。ですから、私は長年にわたるCORS（クロスオリジンリソース共有）に苦労してきました。ここの記事は、苦労している期間中の簡単な表記法と要約です。
•Corsができること：
AJAXの通常の使用には、クロスドメインの問題を通常の検討に考慮する必要があるため、優れたプログラマーは、JSONP、Flash、IFAME、XHR2などのクロスドメインの問題に対する解決策にも闘っています。
•corsの原則：
CORSは、クロスドメインアクセスのメカニズムを定義します。これにより、AJAXはクロスドメインアクセスを実現できます。 CORSを使用すると、あるドメインのネットワークアプリケーションがクロスドメインAJAXリクエストを別のドメインに送信できます。この関数の実装は非常に簡単で、サーバーによって応答ヘッダーを送信するだけです。
詳細については、以下のトピックにアクセスしましょう。
クロスサイトHTTP要求とは、リクエストを開始するリソースが位置するドメインが、リソースがリクエストを開始するドメインとは異なるHTTPリクエストを指します。
たとえば、WebサイトA（www.a.com）の<img>タグを介してBステーション（www.b.com/images/1.jpg）のリソースを紹介する場合、ステーションAはステーションBへのクロスサイトリクエストを開始します。
この種の画像リソースのクロスサイトリクエストは許可されており、同様のクロスサイトリクエストにはCSSファイル、JavaScriptファイルなどが含まれます。
ただし、HTTP要求がスクリプトで開始された場合、セキュリティ上の理由でブラウザによって制限されます。たとえば、XMLHTTPRequestオブジェクトを使用してHTTP要求を開始するには、同じオリジンポリシーに準拠する必要があります。
いわゆる「同一のオリジンポリシー」は、WebアプリケーションがXMLHTTPRequestオブジェクトのみを使用して、原点のあるドメインにHTTP要求を開始できることを意味します。この要求ソースとリクエストオブジェクトは、同じドメインにある必要があります。
たとえば、http：//www.a.com、このWebサイトのプロトコルはhttp、ドメイン名はwww.a.com、デフォルトポートは80です。
•http：//www.a.com/index.htmlホモジー
•https：//www.a.com/a.htmlさまざまなソース（異なるプロトコル）
•http：//service.a.com/testservice/testさまざまなソース（ドメイン名は異なります）
•http：//www.b.com/index.htmlさまざまなソース（ドメイン名は異なります）
•http：//www.a.com：8080/index.htmlさまざまなソース（異なるポート）
より強力でより豊富なWebアプリケーションを開発するために、クロスドメイン要求が非常に一般的です。それでは、セキュリティをあきらめずにクロスドメインのリクエストをどのように行いますか？
W3Cは、新しいメカニズム、つまりクロスオリジンリソース共有（CORS）を推奨しています。
クロスオリジンリソース共有（CORS）は、クライアント +サーバーの共同宣言を通じてリクエストのセキュリティを保証します。サーバーは、一連のHTTPリクエストパラメーター（アクセスコントロールアロウオリジンなど）をHTTPリクエストヘッダーに追加して、どのドメイン要求とどのリクエストタイプが許容されるかを制限します。クライアントは、リクエストを開始するときに独自のソース（Orgin）を宣言する必要があります。そうしないと、サーバーはそれを処理しません。クライアントが宣言しない場合、リクエストはブラウザによって直接傍受され、サーバーに到達できません。 HTTP要求を受信した後、サーバーはドメインを比較し、同じドメインからのリクエストのみが処理されます。
CORを使用してクロスドメインリクエストを実装する例：
クライアント：
function gethello（）{var xhr = new xmlhttprequest（）; xhr.open（ "post"、 "http://b.example.com/test.ashx"、true）; xhr.setRequestheader（ "Content-Type"、 "アプリケーション/X-WW-Form-Form-form-form-form-forlencoded"）; //リクエストソースxhr.setRequestheader（ "origin"、 "http://a.example.com"）; xhr.oneadystatechange = function（）{if（xhr.readystate == 4 && xhr.status == 200）{var ResponseText = = 200）{ xhr.responsetext; console.info（responsetext）;}} xhr.send（）;}サーバ：
パブリッククラステスト：ihttphandler {public void processRequest（httpcontext context）{context.response.contenttype = "text/plain"; //すべてのドメインContext.response.addhead（ "Access-control-allow-origin"、 "*"）; isReusable {get {return false;}}}Web APIでクロスドメインアクセスを有効にします
CORSは、リクエストのセキュリティを確保するためのサーバー側およびクライアントコラボレーションステートメントです。したがって、Web APIでCORを有効にする必要がある場合は、それに応じて構成する必要もあります。幸いなことに、MicrosoftのASP.NETチームは、Nugetに追加するだけで、公式のクロスドメイン対応ソリューションを提供します。
次に、次の構成をapp_start/webapiconfig.csで使用して、クロスドメインアクセスを実現します。
public static class webapiconfig {public static voidレジスタ（httpconfiguration config）{// web api configuration and services // web APIを構成して、ベアラートークン認証のみを使用します。 config.suppressdefaulthostauthentication（）; config.filters.add（new HostauthEnticationFilter（oauthdefaults.authenticationtype））; "API/{Controller}/{id}"、defaults：new {id = routeparameter.optional}）; // Web API Cross-Domain Access enableCrossSiterequests（config）; config.formatters.jsonformatter.supportedmediatypes.add（new mediatepeervalue（ "） void enableCrossSiterequests（httpConfiguration config）{var cors = new enableCorsattribute（origins： "*"、headers： "*"、methods： "*"）; config.enablecors（cors）;}}}IE10以下のブラウザはCORSをサポートしていないため、CORSは現在中国の主流のクロスドメインソリューションではありません。ただし、Windows 10のリリースとIEの徐々に減少すると、CORが近い将来にクロスドメイン標準ソリューションになることが予見可能です。
上記は、編集者が紹介したJSクロスドメインソリューションです。それがあなたに役立つことを願っています！