クロスドメイン ソリューション 1: CORS を使用して Cross-domain_html/css_WEB-ITnose を実現する

クロスサイト HTTP リクエスト (クロスサイト HTTP リクエスト) とは、リクエストを開始したリソースが配置されているドメインが、リクエストが指すリソースが配置されているドメインとは異なる HTTP リクエストを指します。

たとえば、Web サイト A (www.a.com) の タグを介してサイト B (www.b.com/images/1.jpg) のリソースを紹介すると、サイト A はサイトはクロスサイトリクエストを開始します。

この種の画像リソースに対する同様のクロスサイト リクエストには、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 は、Cross-Origin Resource Sharing (CORS) という新しいメカニズムを推奨しました。

クロスオリジン リソース共有 (CORS) は、クライアント + サーバーの共同宣言を通じてリクエストのセキュリティを確保します。サーバーは、一連の HTTP リクエスト パラメーター (Access-Control-Allow-Origin など) を HTTP リクエスト ヘッダーに追加して、受け入れられるドメイン リクエストとリクエスト タイプを制限します。クライアントは、次の場合に独自に宣言する必要があります。 Origin (Origin)、そうでない場合、クライアントがステートメントを作成しない場合、リクエストはブラウザによって直接インターセプトされ、サーバーに到達しません。 HTTP リクエストを受信した後、サーバーはドメインを比較し、同じドメインからのリクエストのみが処理されます。

CORS を使用してクロスドメイン リクエストを実装する例:

クライアント:

function getHello() {            var xhr = new XMLHttpRequest();            xhr.open("post", "http://b.example.com/Test.ashx", true);            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");　　　             // 声明请求源            xhr.setRequestHeader("Origin", "http://a.example.com");            xhr.onreadystatechange = function () {                if (xhr.readyState == 4 && xhr.status == 200) {                    var responseText = xhr.responseText;                    console.info(responseText);                }            }            xhr.send();        }

サーバー:

public class Test : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            // 声明接受所有域的请求            context.Response.AddHeader("Access-Control-Allow-Origin", "*");            context.Response.Write("Hello World");        }        public bool IsReusable        {            get            {                return false;            }        }    }

Web API でのクロスドメイン アクセスを有効にする

CORS は、リクエストを確実にするためのサーバーとクライアントの間の共同ステートメントです。したがって、Web API で CORS を有効にする必要がある場合は、それに応じて CORS を構成する必要もあります。幸いなことに、Microsoft の ASP.NET チームは、クロスドメイン サポートをサポートする公式ソリューションを提供しています。これを NuGet に追加するだけで済みます。

次に、App_Start/WebApiConfig.cs で次の構成を実行してクロスドメイン アクセスを実現します。

public static class WebApiConfig    {        public static void Register(HttpConfiguration config)        {            // Web API 配置和服务            // 将 Web API 配置为仅使用不记名令牌身份验证。            config.SuppressDefaultHostAuthentication();            config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));            // Web API 路由            config.MapHttpAttributeRoutes();            config.Routes.MapHttpRoute(                name: "DefaultApi",                routeTemplate: "api/{controller}/{id}",                defaults: new { id = RouteParameter.Optional }            );            // 允许Web API跨域访问            EnableCrossSiteRequests(config);            config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));        }        private static void EnableCrossSiteRequests(HttpConfiguration config) {            var cors = new EnableCorsAttribute(              origins: "*",              headers: "*",              methods: "*"              );            config.EnableCors(cors);        }    }

IE10 より前のブラウザは CORS をサポートしていないため、CORS は現在中国では主流のクロスドメイン ソリューションではありませんが、 Windows 10 のリリースと IE の段階的な衰退により、近い将来、CORS がクロスドメインの標準ソリューションになることが予測されます。

デモのダウンロード (bd36)

参考文献:

https://www.w3.org/TR/cors/

http://www.ruanyifeng.com/blog/2016/04/cors.html

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS