■ASP.NET Web API Top

１．IIS

２．ASP.NET Web APIの開発の準備

３．クロスオリジン制限

■IIS

IISへ.NET Frameworkをインストールする
IIS上で作成したアプリケーションで使用する.NET Frameworkのバージョンと
WebAPI上で使用する.NET Frameworkのバージョンは一致していなければならない。

.NET Frameworkのインストール後にIISのインストールを行った場合は、バージョンの不一致が発生する可能性があり、
この場合、手動でIISに対して.NET Frameworkのインストールが必要となる。

インストール手順

１．cmdを管理者権限で起動する。

２．下記のフォルダ配下にバージョンごとにフォルダが分かれているのでインストールを行うバージョンのフォルダへ移動する。
　　 %windir%\Microsoft.NET\

３．下記のコマンドを実行する
　　aspnet_regiis -i

■ASP.NET Web APIの開発の準備

ASP.NET Web APIの開発の手順
Visual Studio Community 2017 で説明する。( ひとまずCore は使用しない )

１．「ファイル」−「新規作成」−「プロジェクト」−「ASP.NET Web アプリケーション(.NET Framework)」

２．テンプレートで「Web API」を選択する。

３．不要なファイルを削除する。最終的に以下の感じにする

４．Global.asax.csの BundleConfig.RegisterBundles(BundleTable.Bundles); を削除する。

５．Controllersフォルダ内にあるcsファイルにビジネスロジックを実装していく。

■クロスオリジン制限

クロスオリジン制限
オリジンとは、
１．httpやhttpsといったURLのプロトコル
２．ホスト名
３．ポート番号
で構成された要素のこと。

Webではセキュリティの観点から同一オリジンからの通信のみが許可される。
したがってAJAX通信を行う場合、JavaScriptを実行するオリジンとWebAPIを実行するオリジンは同一である必要がある。
ただしこれはXMLHttpRequest Level1 の話で Level2 ではクロスオリジン通信を許可する機能が追加されている。
しかしサーバー側つまりWebAPI側でクロスオリジン通信を許可する設定が必要。 

<!-- HTML -->

<!DOCTYPE HTML>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <title>サンプル</title>
   <script src="js/sample.js" charset="UTF-8"></script>
</head>
<body>
   <div id="div_id"></div>
   <input type="button" value="ボタン" id="input_id" />
</body>
</html>




// JavaScript

var isProcessing = false;

window.addEventListener('load', function(){
   var obj = document.getElementById('input_id');

   obj.addEventListener('click', function(){
      if (isProcessing){
         return;
      }

      isProcessing = true;

      var xhr = new XMLHttpRequest();

      // ステータスが変更された際に発生するイベントの設定
      xhr.onreadystatechange = function(){
         // 受信終了
         if (xhr.readyState == 4){
            // 200:成功
            // 304:前回の送信内容と同じ
            if (xhr.status == 200 || xhr.status == 304){
               // 文字列をJSON形式にパース。
               var data = JSON.parse(xhr.responseText);

               console.log(data);
               
               var obj2 = document.getElementById('div_id');
               
               var s = '';
               
               for( var d of data ){
                  s += d + ', ';
               }
               
               obj2.textContent = s;
               
               isProcessing = false;
            }
            // ステータスが0になるときがあるのでそれは除外しておく
            else if(xhr.status > 0){
               console.log(xhr.status + ':' + 'error!!');
               isProcessing = false;
            }
         }
      };

      // リクエストを初期化する
      // 第３引数がtrueの場合は非同期通信となる
      xhr.open('GET', 'http://localhost/WebAPI/api/values/', true);

      // HTTPリクエストヘッダの値を設定
      // If-Modified-Sinceは条件付きリクエストで、サーバーから304が返信された場合ブラウザはキャッシュを使用する
      xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');

      // リクエストを送信する。非同期通信の場合ここで待ちが発生しない。
      xhr.send(null);

   }, false);
}, false);




// ASP.NET WebAPI
// ValuesController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace WebApplication2.Controllers
{
   public class ValuesController : ApiController
   {
      // GET api/values
      public IEnumerable Get()
      {
         return new string[] { "value1", DateTime.Now.ToString() };
      }
   }
}




// ASP.NET WebAPI
// Web.config

<system.webServer>
   <httpProtocol>
      // カスタムヘッダーを追加する
      <customHeaders>
         // アクセスを許可するクライアント側のURLを設定する。すべてのURLからのアクセスを許可する場合は * を使用する。
         <add name="Access-Control-Allow-Origin" value="http://localhost:90"/>
         <add name="Access-Control-Allow-Headers" value="If-Modified-Since" />
         <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
   </httpProtocol>
</system.webServer>




// ASP.NET WebAPI
// Global.asax.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace WebApplication13
{
    public class WebApiApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            GlobalConfiguration.Configure(WebApiConfig.Register);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            //BundleConfig.RegisterBundles(BundleTable.Bundles);
        }

        protected void Application_BeginRequest()
        {
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                // 現在バッファリングされているすべての出力をクライアントへ送信する。
                // HTTPヘッダーに追加する場合に必要らしい。
                Response.Flush();
            }
        }
    }
}
Top
inserted by FC2 system