Web Apiにドメイン間リソース共有(CORS)をサポートさせる
87115 ワード
Reference: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
Implementation:
1、2つのプロジェクトを作成し、WebApi、WebApp、それぞれMVC 4 Empty、MVC 4 Basicプロジェクトである.
2.WebApiプロジェクトでControllerを追加し、templateはEmpty API controllerとして選択する
コードは次のとおりです.
3、WebApiプロジェクトを
Implementation:
1、2つのプロジェクトを作成し、WebApi、WebApp、それぞれMVC 4 Empty、MVC 4 Basicプロジェクトである.
2.WebApiプロジェクトでControllerを追加し、templateはEmpty API controllerとして選択する
コードは次のとおりです.
using System.Net.Http; using System.Web.Http; namespace WebService.Controllers { public class TestController : ApiController { public HttpResponseMessage Get() { return new HttpResponseMessage() { Content = new StringContent("GET: Test message") }; } public HttpResponseMessage Post() { return new HttpResponseMessage() { Content = new StringContent("POST: Test message") }; } public HttpResponseMessage Put() { return new HttpResponseMessage() { Content = new StringContent("PUT: Test message") }; } } }
3、WebApiプロジェクトを
http://localhost/ , , , :
まで運行する
4、 WebApp HomeController, Index , :
<div> <select id="method"> <option value="get">GET</option> <option value="post">POST</option> <option value="put">PUT</option> </select> <input type="button" value="Try it" onclick="sendRequest()" /> <span id='value1'>(Result)</span> </div> @section scripts { <script> var serviceUrl = 'http://myservice.azurewebsites.net/api/test'; // Replace with your URI. function sendRequest() { var method = $('#method').val(); $.ajax({ type: method, url: serviceUrl }).done(function (data) { $('#value1').text(data); }).error(function (jqXHR, textStatus, errorThrown) { $('#value1').text(jqXHR.responseText || textStatus); }); } </script> }
5、この 、WebAppプロジェクト-deBug-start new instanceを クリックし、tryボタンをクリックすると、Errorが されます.WebApiプロジェクトは のようにドメイン リソース をサポートしていないからです.
6、この たちの ができました. 、Implementationを に し、Nugetのconsole( き :VSで、View-other windows-packges manager console)で のコマンドを します.Install-Package Microsoft.AspNet.WebApi.Cors -pre -project WebService(api )
7、 App_Start WebApiConfig ( DefaultApi ):
public static void Register(HttpConfiguration config) { // New code config.EnableCors(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); }
8、TestControllerに EnableCorsを し、 のようにする.namespace WebService.Controllers { [EnableCors(origins: "http://myclient.azurewebsites.net", headers: "*", methods: "*")] public class TestController : ApiController { // Controller methods not shown... } }
9、この はすでにWebApiの でCORSを して、あなたは の5 の を って、テストを って、 た は の りです:
Possible ERROR:NugetからCORSをインストールした 、 のエラーが する があります.
The type initializer for 'System.Web.Http.GlobalConfiguration' threw an exception
の で を します.
http://stackoverflow.com/questions/19091195/the-type-initializer-for-system-web-http-globalconfiguration-threw-an-exceptio nugetでこのコマンドを すると、このエラーを できます.Install-Package Microsoft.AspNet.WebApi-IncludePrerelease