Angularで用意したHttp.postでpostメソッドのhttpリクエストが送れない

Question

前提

• ASP.Net WebAPI (Dotnet Core2)
• Angular CLI: 1.7.4
• Node: 9.5.0
• Angular: 5.2.9

実現したいこと

• ASP.Net WebAPI側で用意したAPIに対して、AngularのHttp.post()を使用してアクセスしたい

発生している問題・エラーメッセージ

• Chromeの開発者ツールのコンソールに出ているエラーメッセージ

zone.js:2969 OPTIONS http://localhost:5000/api/Example 404 (Not Found)

Failed to load http://localhost:5000/api/Example: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 404.

該当のソースコード

• ASP.Net WebAPI

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using ExampleApp.Models;
using Microsoft.AspNetCore.Mvc;

namespace ExampleApp.Controllers{

    [Route("api/[controller]")]
    public class ExampleController : Controller {

        [HttpGet]
        public IEnumerable<NoteModel> Get()
        {
            this.Response.Headers.Add("Access-Control-Allow-Origin", "*");
            return _notes;
        }

        [HttpGet("{id}")]
        public NoteModel Get(int id)
        {
            //var found = _notes.Where(x => x.Id == id.ToString());
            //if(found.Any())
                return _notes.Where(x => x.Id == id.ToString()).FirstOrDefault();
            //return _notes[id];
        }
 
        public NoteController(){
            _notes.Add(new NoteModel(){Id="1",Detail ="テスト"});
            _notes.Add(new NoteModel(){Id="2",Detail ="テスト2"}); 
        }
        IList<NoteModel> _notes = new List<NoteModel>();

        [HttpPost]
        public IActionResult Post([FromBody] NoteModel d)
        {
            foreach (var h in this.Request.Headers) {
                Console.WriteLine($"{h.Key}: {h.Value}");
            }
            if (d == null) return BadRequest();

            //_notes.Add(d);
            Console.WriteLine(d);

            return NoContent();
        }

        // PUT api/values/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }
    }
}

• ASP.Net WebAPI Cors設定

using System;
using System.Web.Http;

namespace ExampleApp
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.EnableCors();

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

• Angular

import { Injectable } from '@angular/core';
import {
    Headers
,   Http
,   RequestOptionsArgs
,   RequestOptions
,   URLSearchParams
} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import { Note } from '../note';
import { Options } from 'selenium-webdriver/chrome';

@Injectable()
export class ApiService {
  // RestAPIのURL
  private apiurl = 'http://localhost:5000/api/Example';

  // コンストラクタで利用するモジュールをインスタンス化
  constructor(private http: Http) { }

  // 商品一覧取得
  public getItems(): Observable<Note[]> {
    console.log(this.apiurl);
    // リクエストパラメータセット
    let option: RequestOptions;
    option = this.setHttpGetParam(this.apiurl);

    // レスポンス返却
    return this.http.get(this.apiurl, option)
      .map((response) => {
        console.log(response);
        let content;
        const obj = response.json();
        content = {
          error: null,
          data: obj
        };
        console.dir(content);
        return content;

      });
  }

  // Http(Get)通信のリクエストパラメータをセットする
  private setHttpGetParam(url: string): RequestOptions {
    const options: RequestOptionsArgs = {
      method: 'get',
      url: url,
    };
    return new RequestOptions(options);
  }

  public post(detail: String): void {
    const note = new Note();
    note.Detail = detail;
    note.IsChecked = false;
    note.Id = '0';
    const json = JSON.stringify(note);

    const headers = new Headers({
      'Content-Type': 'plane/text'
    , 'Access-Control-Origin': '*'
    , 'x-requested-with': 'accept'
    , 'Cache-Control': 'no-cache'
    });
    const options = new RequestOptions({'headers': headers});
    this.http.post(this.apiurl, json, options).toPromise()
             .then(x => console.log(x.status))
             .catch(e => console.log(e));
//    this.http.post(this.apiurl, json, {'headers' : headers})
//             .map((res) => console.log(res.status))
//             .subscribe();
  }
}

試したこと

• ASP.Net WebAPI側で用意したGetやPost APIにはPostmanなどのRESTful API接続ツールで接続できることを確認した
• また、PostmanでのAPI接続テスト時に各メソッド(POST,GET等)にブレークをはって、アクセスが確かに処理されていることを確認した
• ASP.Net WebAPI側にCorsを有効にする設定を追加した

補足情報（FW/ツールのバージョンなど）

• FW/ツールについては概要欄記載のため概要欄を確認してください
• Mac/Windows問わず発生しています
• GETメソッドは意図した通りに値を返しています

Comments

[退会済みユーザー]

エラーメッセージに preflight とあるので、クロスドメインの問題があるように思えますが、そのあたりは確認してますか？

[cocoalix]

クロスドメインの問題については不完全ながら認識していました。そのためC#側と同様にAngularのPOST通信のリクエストヘッダに `'Access-Control-Origin': '*'` をつけています。今、この指摘を受けたことで再度調べ、サーバサイドの設定が必要のように見えましたのでそのコードを追加しましたが、状況は改善されませんでした。追加した内容は質問に反映します。

Answer 1

クロスドメインの問題については不完全ながら認識していました。そのためC#側と同様にAngularのPOST通信のリクエストヘッダに 'Access-Control-Origin': '*' をつけています。

エラーメッセージに preflight とあることだけからの想像ですが、プリフライトリクエストを処置するためにはサーバー側での対応も必要になります。

具体例は、ASP.NET でホスティングしている WCF サービスの場合ですが、以下の記事を見てください。

クロスドメインの WCF サービス
http://surferonwww.info/BlogEngine/post/2016/12/27/wcf-service-in-cross-domain.aspx

ただ、Core とのことですので、上に紹介した記事のように Global.asax の Application_BeginRequest での対処ができるかどうか自分はわかりませんが・・・

Comments

[cocoalix]

仰る通り、ASP.Net WebAPI側にてプリフライトリクエストに対応するコードがありませんでした。

MSDNによると、Setup.csにある`Configure()`にてCORSの対応を設定できるとのことでしたので、
設定したところリクエストがエラーとならず処理されました。
`Post()`内に実行が通っていることをブレークポイントを張ってリクエストを流すことで確認済です。
https://docs.microsoft.com/ja-jp/aspnet/core/security/cors

この回答はクライアント側かサーバ側か、問題がどちらにあるのかさえわかっていなかった私を問題解決へと導きました。

最後に、ご返答遅くなり申し訳ありません。
的確なご指導、ありがとうございました。