[Windows8][ASP.NET]ASP.NET WebAPIでjsonリクエスト時にブラウザではxmlとして解釈される問題


ASP.NET勉強中に下記のような事象に見舞われたのでまとめ。

ASP.NET(MVC5)のWebAPIを使って、とあるモデルの内容をそのまま返すControllerを作成して、ブラウザでURLリクエストを送った時、なぜがxmlとして解釈されてしまう問題が発生したので、その際の回避方法と各種ブラウザ間での挙動についてまとめました。

## 1.前提

[独習ASP.NET 第４版 /山田 祥寛](http://amzn.to/1Nj6GBz)
を参考資料として、この本のサンプルプログラムを前提としています。

コードとしては、下記を前提としております
    1. ApiControllerを継承したBooksControllerを作成
    2. BooksControllerで、作成済みのBookテーブル(T-SQL使用）をGETリクエストで渡ってきたidを検索して、ヒットしたらそのままjson形式でデータを返す
    3. url的には次を想定しています：
　　http://localhost:51449/api/Books/978-4-7981-2631-9?format=json
　　※「978-4-7981-2631-9」はBookテーブルのidです

## 2. Telnetで通信状態を確認する

コマンドプロンプトにて

```comandpronpt
    > chcp 65001
    > telnet
    
...(↓telnet接続後）
    > GET /api/Books/978-4-7981-2631-9?format=json HTTP/1.1
    > Host: localhost
```

実行結果
![cmd.PNG](https://qiita-image-store.s3.amazonaws.com/0/61208/8a9c6715-56a4-00a8-f7b1-292e7cde7574.png)

この時点で、レスポンスヘッダは確かjsonをさし示しています
（4行目ぐらいに「Content-Type: applicaion/json; charset=utf-8」となっているため）

## 3. ブラウザで開いてみる
続いて上記をブラウザで開いてみます。
一応、下記３つで。（基本開発者ツールでの挙動で確認します）
1. Chrome
2. Waterfox(Firefoxの64bit版）
3. IE11


#### 3-1. Chrome

![chrome3_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/61208/cd43629d-d1bd-3446-77c7-c8a0dcfda6fb.png)

Response Headerが「Content-Type:application/xml; charset=utf-8」になってる...
そしてブラウザ上でレンダ結果もxml...orz


#### 3-2. Waterfox(Firefox 64bit版)
![waterfox3_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/61208/a721189c-2257-f933-dc97-b57e95559e4d.png)

こちらもChromeさんと同じ。


#### 3_3. IE11
![IE3_3.PNG](https://qiita-image-store.s3.amazonaws.com/0/61208/542e490c-d33d-6747-acf4-4ab091fad789.png)

こちらに至っては、text/htmlと解釈されていそうな雰囲気だし、ダウンローダ―が走るし、、、もうわけわかりませんｗ
（IE的にjsonが解釈できず、コンテンツとしてダウンロードされるっぽい）


##### _結果_
ブラウザでリクエスト送ると、見事にxmlとして解釈してくれました（まぁIEさんはjsonとしてファイルを保存してくれてますが、そもそも解釈してくれてないかｗ）


## 4. ブラウザがjsonと認識してくれるようにする
参考にしている本では、「app_start > WebApiConfig.cs」にて、下記のような設定を行っている部分がある

```C#
    config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
```

この前あたりに、
```C#
    config.Formatters.JsonFormatter.AddQueryStringMapping("format", "json", "application/json")
```
の一文を追加し、クエリパラメータが「format=json」であれば、レスポンスヘッダのMIMEを「application/json」に変更されるようにする。


そのうえで、再ビルドして実行。

実行後に再度、telnetコマンドと上記３ブラウザでの表示の違いを確認してみる

## 5. 再度、telnetコマンド＋３ブラウザで表示の違いを確認してみる

#### 5. telnetコマンド

![telnet_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/61208/ad9714aa-efe6-9d80-c9c4-23b59c93edc3.png)
こちらは問題なくapplication/jsonとして認識（元から）


#### 5_1. Chrome
![chrome5_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/61208/fea23068-7152-1768-2572-680cb1d8918d.png)

Chromeさんでも、jsonだと認識してくれた！
図の左側でもjson形式でレンダリングしてくれてるし、図の右側のContent-Typeも「application/json」として認識してくれてる！


#### 5_2. Waterfox(Firefox 64bit版）
![Waterfox5_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/61208/92d1eeff-6304-5643-ef2f-923fb0b4f48c.png)

Waterfoxさんもちゃんとjsonとして認識してくれてる！


#### 5_3. IE11
![ie5_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/61208/03c39311-7c5b-1533-a0c3-64880eb1c0d9.png)

IEさんも！
...といいたいところですが、IEさんは今日も平常運転。
さすが開発者なかせのIEさん。進化してもそのままなのね、、、？

IEそのままでjsonを解釈させることができる日はくるのでしょうかね
（あるいは知らないだけで解釈させることができるなら、教えて詳しい人）



---
そんなわけでASP.NETにてjsonを扱うときの注意点と、その時の回避方法でした。

ところでなんでブラウザさんはxmlとして解釈してくれたんだろうね？不思議。
気が向いたらそのあたりも調べてみますかね。


---
参考サイト:
http://miso-soup3.hateblo.jp/entry/2013/07/05/065648