クロスサイト 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
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
