크로스 도메인을 지원하는 WebAPI 만들기 (Webform)

MVC 프레임워크나 Webform을 이용해서 WebAPI 서비스를 만들 수 있다.

해당 포스트는 웹폼 (Webform)을 이용해서 만들어 보도록 한다.

1. 닷넷프레임워크 4.5 이상버전을 선택하고 빈 웹폼을 생성한다.

2. 빈 웹폼이다보니 아무것도 없다. 아래와 같은 구조로 파일을 생성해준다.

1. MyController.cs 생성  (WebAPI컨트롤러 클래스)

    - 실제 기능을 담당하는 WebAPI 컨트롤러

2. Global.asax 생성 

3. WebApiConfig.cs 생성

   - WebAPI의 라우팅 규칙을 선언하는 파일

4. 패키지 관리자 콘솔(Nuget)을 이용해서 추가 기능설치

1. Install-Package Microsoft.AspNet.WebApi.WebHost  (WebAPI 라우팅을 사용자가 정의한대로 구성)

2. Install-Package Microsoft.AspNet.WebApi.Cors (WebAPI CrossDomain 구성)

5. WebApiConfig를 아래와 같이 설정한다. 

   1:  using System;

   2:  using System.Collections.Generic;

   3:  using System.Linq;

   4:  using System.Net.Http.Formatting;

   5:  using System.Web;

   6:  using System.Web.Http;

   7:   

   8:  namespace WebApi_CustomRoute

   9:  {

  10:      public static class WebApiConfig

  11:      {

  12:          public static void Register(HttpConfiguration config)

  13:          {

  14:              // Attribute routing. JSON 형식으로 보낸다

  15:              config.MapHttpAttributeRoutes();

  16:              config.Formatters.Clear();

  17:              config.Formatters.Add(new JsonMediaTypeFormatter());

  18:              config.EnableCors();

  19:   

  20:              // Convention-based routing. 기본 라우팅규칙 

  21:              config.Routes.MapHttpRoute(

  22:                  name: "DefaultApi",

  23:                  routeTemplate: "api/{controller}/{action}/{id}",

  24:                  defaults: new { id = RouteParameter.Optional }

  25:              );

  26:          }

  27:      }

  28:  }

6. WebApiConfig 를 설정했으면 global.asax 파일의 Application_Start 메소드에 아래처럼 정의합니다

 1:  GlobalConfiguration.Configure(WebApiConfig.Register);

WebAPI가 시작될때 Route 규칙을 정의함.

7. 환경구성이 완료 되었으면 실제로 서비스할 API MyController.cs 을정의합니다.
 1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Linq;
   4:  using System.Net;
   5:  using System.Net.Http;
   6:  using System.Web.Http;
   7:  using System.Web.Http.Cors;
   8:   
   9:  namespace WebApi_CustomRoute.Service
  10:  {
  11:       [EnableCors("*", "*", "*")] // 크로스 브라우징을 위한 속성
  12:       [RoutePrefix("api")]        // MyController 에 대한 라우팅 규칙
  13:      public class MyController : ApiController
  14:      {
  15:          [HttpGet]
  16:          [Route("book")]
  17:          public IEnumerable<string> GetBooks()
  18:          {
  19:              return new string[] {"아프니까청춘이다.", "안아파도청춘이다.", "그래서청춘이다."};
  20:          }
  21:   
  22:          [HttpGet]
  23:          [Route("name")]
  24:          public IEnumerable<string> GetBookById(string book)
  25:          {
  26:              return new string[] { "책이름은? -->  " + book };
  27:          }
  28:   
  29:          [HttpGet]
  30:          [Route("people")]
  31:          public IEnumerable<string> GetPeople()
  32:          {
  33:              return new string[] { "홍길동", "임꺽정", "장길산" };
  34:          }
  35:   
  36:          [HttpGet]
  37:          [Route("language")]
  38:          public IEnumerable<string> GetLanguage()
  39:          {
  40:              return new string[] { "C#", "JavaScript", "JAVA" };
  41:          }  
  42:      }
  43:  }

자 이제 빌드를 하고 Fiddler를 통해서 호출해봅시다.

1. GetBooks() 메소드는 사용자가 정의한 라우팅 규칙에따라 /api/book 으로 호출

GetPeople()이나 GetLanguage() 역시 Route에 정의한 이름으로 호출하면된다.

2. GET 파라미터가 있는 경우는? 아래와 같이 ?뒤에 인자값을 넘겨서 호출

jQuery Ajax를 이용해서 받을때 혹 IE에서 크로스도메인 문제가 발생한다면

스크립트 상단에  1: $.support.cors = true 를 선언해주면 됩니다.

웹API, WEBAPI, CrossDomain, Ajax, Route, 라우팅, ASP.NET WEbform, 웹폼 WebAPI, ASP.NET