質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • C#

    7116questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET

    529questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

  • TypeScript

    344questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • Angular

    105questions

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 502

cocoalix

score 19

 前提

  • 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メソッドは意図した通りに値を返しています
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2018/04/19 16:36

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

    キャンセル

  • cocoalix

    2018/04/19 17:11 編集

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

    キャンセル

回答 1

checkベストアンサー

+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 での対処ができるかどうか自分はわかりませんが・・・

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/24 19:10 編集

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

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • C#

    7116questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET

    529questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

  • TypeScript

    344questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • Angular

    105questions