CORS：C＃WEBAPIクロスドメインの問題を解決します
WEBAPI関連記事：
- 単純なWeb APIプロジェクトをビルドするためのC＃
- C＃のWEBAPIルーティング構成
- CORS：C＃WEBAPIクロスドメインの問題を解決します
- 認証のC＃のWEBAPI：基本的な基礎認定
- 詳細インタフェースのC＃のWEBAPIの戻り値の型
クロスドメインの問題とは何ですか
セキュリティ上の理由から、ブラウザーは、クロスサイトリクエストスクリプトは、ブラウザのJavaScriptやクッキーは、同じドメインの下でコンテンツにアクセスできる必要が開始され制限されます。このような理由から、私たちの異なるサイト間でのデータアクセスは拒否されます。
CORSは、クロスドメインの問題を解決します
クロスオリジンリソース共有（CORS）メカニズム、安全な行動を確保するために、クロスドメインデータ伝送するように、Webアプリケーション・サーバ・ドメインアクセス制御が可能になります。これは、クロスドメインの原則の問題は、それがアクセスを要求できるのドメイン内のHTTP要求パケットと応答パケットに適切な識別情報を追加することで、ブラウザを伝えることです解決します。
クロスドメインの問題解決の例
ここでは、クロスドメインを解決するためにCORSを使用する方法を説明するために簡単な例を書きます
1、テストプロジェクトを作成します
1.1、WebサイトとWEBAPIサイトとして二つの新しいASP.NET Webアプリケーション：
1.2、設定WEBAPIサイト
でWebApiConfig.csのウェブAPIルーティング内の構成ファイル、具体的な行動へのポイント
//Web API 路由
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi1",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
データを要求するためのコントローラに新しい試験方法：
[Authorize]
[RoutePrefix("api/Account")]
public class AccountController : ApiController
{
/// <summary>
/// 得到所有数据
/// </summary>
/// <returns>返回数据</returns>
[HttpGet]
public string GetAllData()
{
return "Success";
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
ウェブAPIプロジェクトサイトのポート番号を起動します。8476
1.3、Webサイトを構成
新しいインデックステストページを作成するには：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
测试结果：
<div id="div_test">
hello world
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
public ActionResult Index()
{
return View();
}
- 1
- 2
- 3
- 4
処理要求とjQueryのAJAX：
<script>
var ApiUrl = "http://localhost:8476/";
$(function () {
$.ajax({
type: "get",
dataType:"json",
url: ApiUrl + "api/Account/GetAllData",
data: {},
success: function (data, status) {
if (data == "success") {
$("#div_test").html(data);
}
},
error: function (e) {
$("#div_test").html("Error");
},
complete: function () {
}
});
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
2、試験
無処理の場合、およびWebプロジェクトを実行し、結果は次のとおりです。
あなたは私たちのクロスドメインアクセスを拒否するようにブラウザを見ることができます。
図3に示すように、使用してクロスドメインCORS
まず、CORSをインストールし、上記WebApiCorsにNuget検索「microsoft.aspnet.webapi.cors」プロジェクトを使用し、最初にインストールし
、我々はこのパッケージをインストールする場合、既存のパッケージディレクトリには、二つの名前を追加します「Microsoft.AspNetました。 Cors.5.2.3「および」Microsoft.AspNet.WebApi.Cors.5.2.3」、そこに格納された2つのアセンブリのための基準（System.Web.Cors.dllとSystem.Web.Http.Cors.dll）のそれは、自動的にプロジェクトWebApiCorsに追加されます
そして、WebApiConfig.csファイル次App_Startのクロスドメインの設定フォルダにクリップ
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
//跨域配置
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
// Web API 路由
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi1",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
私たちは暫定3「*」いいえ、もちろん、ドメインを横断することができますどのドメインを指定するための一般的な必要性、その上でどのようなクロスドメインアクションでプロジェクトで使用。以下では説明します
再実行してください：
Googleの
IE7、IE8、IE9
私はクロスドメインうん、どのようIE7,8,9かどうかを設定していますか？CORSブラウザについて話をする必要がある。この時間は、問題をサポートしています。どこでもオンラインこの絵に検索：
あなたは、実際に時の呼び出しで指定され、その後、どのように問題IEブラウザのサポートにそれを解決するために、IE8,9ブラウザのサポートの一部だけを見ることができる真= jQuery.support.cors;これは問題IE8,9を解決することができるようになります。
<script>
jQuery.support.cors = true;
var ApiUrl = "http://localhost:8476/";
$(function () {
$.ajax({
type: "get",
url: ApiUrl + "api/Account/GetAllData",
data: {},
success: function (data, status) {
if (status == "success") {
$("#div_test").html(data);
}
},
error: function (e) {
$("#div_test").html("Error");
},
complete: function () {
}
});
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
4、CORS固有のパラメータ設定。
私たちは、上記を使用します。config.EnableCors（新新EnableCorsAttribute（「」、「 」、「*」））;限り、人々はあなたのURLを知っているように、任意のリソース要求が返されるアスタリスクは、それが安全ではないこと、アクセス制御の必要そう。
コンフィギュレーション
のWeb.Config構成で：
<appSettings>
<add key="cors:allowedMethods" value="*"/>
<add key="cors:allowedOrigin" value="http://localhost:8610"/>
<add key="cors:allowedHeaders" value="*"/>
</appSettings>
- 1
- 2
- 3
- 4
- 5
そして、WebApiConfig.cs設定ファイル
public static void Register(HttpConfiguration config)
{
//跨域配置
var allowedMethods = ConfigurationManager.AppSettings["cors:allowedMethods"];
var allowedOrigin = ConfigurationManager.AppSettings["cors:allowedOrigin"];
var allowedHeaders = ConfigurationManager.AppSettings["cors:allowedHeaders"];
var geduCors = new EnableCorsAttribute(allowedOrigin, allowedHeaders, allowedMethods)
{
SupportsCredentials = true
};
config.EnableCors(geduCors);
//config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
設定方法2は、
あなただけのAPIのいくつかのためにクロスドメインをしたい場合は、プロパティが直接API上記のクラスをマークするために使用することができます。
[EnableCors(origins: "http://localhost:8610/", headers: "*", methods: "GET,POST,PUT,DELETE")]
public class AccountController : ApiController
{
/// <summary>
/// 得到所有数据
/// </summary>
/// <returns>返回数据</returns>
[HttpGet]
public string GetAllData()
{
return "Success";
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13