C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[7]: ReactとASP.NETで通信エラー


(過去ログ 176 を表示中)

[トピック内 14 記事 (1 - 14 表示)]  << 0 >>

■101220 / inTopicNo.1)  ReactとASP.NETで通信エラー
  
□投稿者/ tosh (1回)-(2023/01/18(Wed) 17:37:41)

分類:[ASP.NET (C#)] 

お世話になります。
フロントエンドをReact、バックエンドをASP.NETでWebアプリ開発をしております。
C#開発経験はありますが、Webアプリについては
数日前にフロントエンドとバックエンドが別々に動作するプログラムである事を
初めて知ったレベルの超初心者です。
とりあえずフロントエンドからバックエンドにJSONデータを送信し、応答を受け取るところから
始めようとしているのですが、ローカルでの通信でいきなり躓いている次第です。

送信先URL:https://localhost:44321/api/LoginItems_Toka_/
送信するJSON:
 {
	"Id":"ssss",
	"Password":"sss",
	"IsOK":false
 }


上記JSONをフロントエンドから送信すると、バックエンド側で以下のエラーが出て処理が行われず、応答もありません。
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/2.0 OPTIONS https://localhost:44321/api/LoginItems_Toka_/  
Microsoft.AspNetCore.Routing.EndpointMiddleware:Information: Executing endpoint '405 HTTP Method Not Supported'
Microsoft.AspNetCore.Routing.EndpointMiddleware:Information: Executed endpoint '405 HTTP Method Not Supported'
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 21.8262ms 405 
例外がスローされました: 'System.NullReferenceException' (Microsoft.AspNetCore.Server.IIS.dll の中)
スレッド 0x57a8 はコード 0 (0x0) で終了しました。

しかし同じJSONをPOSTMANから送信すると、以下の様なログが出て応答も返ってきました。
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/1.1 POST https://localhost:44321/api/LoginItems_Toka_/ application/json 45
Microsoft.AspNetCore.Routing.EndpointMiddleware:Information: Executing endpoint 'TokaBackendApi.Controllers.LoginTokaController.Post (TokaBackendApi)'
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Route matched with {action = "Post", controller = "LoginToka"}. Executing controller action with signature System.String Post(loginItem_Toka) on controller TokaBackendApi.Controllers.LoginTokaController (TokaBackendApi).
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Executing action method TokaBackendApi.Controllers.LoginTokaController.Post (TokaBackendApi) - Validation state: Valid
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Executed action method TokaBackendApi.Controllers.LoginTokaController.Post (TokaBackendApi), returned result Microsoft.AspNetCore.Mvc.ObjectResult in 3385.7507ms.
Microsoft.AspNetCore.Mvc.Infrastructure.ObjectResultExecutor:Information: Executing ObjectResult, writing value of type 'System.String'.
Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information: Executed action TokaBackendApi.Controllers.LoginTokaController.Post (TokaBackendApi) in 3560.091ms
Microsoft.AspNetCore.Routing.EndpointMiddleware:Information: Executed endpoint 'TokaBackendApi.Controllers.LoginTokaController.Post (TokaBackendApi)'
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 3687.1158ms 200 text/plain; charset=utf-8
スレッド 0x40e0 はコード 0 (0x0) で終了しました。
スレッド 0x4ff4 はコード 0 (0x0) で終了しました。
スレッド 0x2a10 はコード 0 (0x0) で終了しました。
スレッド 0x1eb0 はコード 0 (0x0) で終了しました。

<フロントエンド側ソースコード>
  const loginClick = async () => {

    try {
      // APIにPOSTリクエスト
      data = await axios.post("https://localhost:44321/api/LoginItems_Toka_/", {"Id":"ssss","Password":"sss","IsOK":false});

    } catch (e) {
      console.error(e);
    }
  }

<バックエンド側ソースコード>
    [Route("api/LoginItems_Toka_")]
    [ApiController]
    public class LoginTokaController : ControllerBase
    {

        public class loginItem_Toka
        {
            public string Id { get; set; } = "";
            public string Password { get; set; } = "";
            public bool IsOK { get; set; } = false;
        }


        // POST api/LoginItems_Toka_
        [HttpPost]
        public string Post(loginItem_Toka postData)
        {
            loginItem_Toka resData = new loginItem_Toka();

            resData.Id = postData.Id;
            resData.Password = postData.Password;

            if (postData.Password == "pass")
            {
                resData.IsOK = true;
            }

            return JsonConvert.SerializeObject(resData, Formatting.Indented);
        }
    }

POSTMANでは送受信できるので、フロントエンド側に何らかの問題があるのではないかと思いますが
色々調べても解決策は見つかりませんでした。
(WebDAVを削除するという解決策を見つけたものの、元々入ってない)
どうすれば通信できる様になるでしょうか?

引用返信 編集キー/
■101221 / inTopicNo.2)  Re[1]: ReactとASP.NETで通信エラー
□投稿者/ 伝説のカレー (64回)-(2023/01/18(Wed) 17:49:39)
No101220 (tosh さん) に返信

> Microsoft.AspNetCore.Routing.EndpointMiddleware:Information: Executing endpoint '405 HTTP Method Not Supported'
エラーメッセージはHTTP Methodがサポートされてませんよと出てますね

> Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/2.0 OPTIONS https://localhost:44321/api/LoginItems_Toka_/
> Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/1.1 POST https://localhost:44321/api/LoginItems_Toka_/ application/json 45

上が失敗したもので下が成功したものです
上の方はOPTIONSというメソッドをリクエストしてるような…
これがPOSTになればいんじゃないですかね

axios.postを調べるのがいんじゃないかなと思いました

引用返信 編集キー/
■101222 / inTopicNo.3)  Re[2]: ReactとASP.NETで通信エラー
□投稿者/ 伝説のカレー (65回)-(2023/01/18(Wed) 17:52:41)
あれ、違うかも
何らかのメソッドがリクエストされてNot SupportedだったのでOPTIONSが実行されましたってログなのかな
いずれにしてもリクエストしてるHTTPメソッドが怪しそうではあります
引用返信 編集キー/
■101223 / inTopicNo.4)  Re[1]: ReactとASP.NETで通信エラー
□投稿者/ WebSurfer (2610回)-(2023/01/18(Wed) 19:22:04)
No101220 (tosh さん) に返信

開発環境を書いてください。OS, Visual Studio, .NET のバージョン、Visual Studio
でプロジェクトを作るときに使ったテンプレートは何かなど。
引用返信 編集キー/
■101224 / inTopicNo.5)  Re[1]: ReactとASP.NETで通信エラー
□投稿者/ 魔界の仮面弁士 (3547回)-(2023/01/18(Wed) 19:52:38)
No101220 (tosh さん) に返信
> Request starting HTTP/2.0 OPTIONS https://localhost:44321/api/LoginItems_Toka_/
> Request starting HTTP/1.1 POST https://localhost:44321/api/LoginItems_Toka_/ application/json 45

この分野はあまり詳しくないのですが、ログを見る限り、
AXIOS の方は HTTP/2 で喋っているのに対し、
POSTMAN では HTTP/1.1 になっていますね。
サーバー エンドポイントが両方をサポートしているのか否かで異なるのかも。

HTTP/2 で通信をしたくないときは、IISのマネージャーで「サイト バインドの編集」から
「HTTP/2 を無効にする」をチェックしてみてください。
なお、IIS での HTTP/2 サポートは Server 2016 / Windows 10 以降で、
Server 2012 R2 / Windows 8.1 以下の IIS では非サポートです。
https://learn.microsoft.com/ja-jp/iis/get-started/whats-new-in-iis-10/http2-on-iis

また、POSTMAN 側は HTTP/2 をサポートしていないため、HTTP/1.1 で通信するようです。
https://github.com/postmanlabs/postman-app-support/issues/2701

AXIOS の方は使ったことが無いですが、XmlHttpRequest 依存じゃないですかね。
(ということは、IE10 から繋げば HTTP/1.1 を強制できる?)
引用返信 編集キー/
■101225 / inTopicNo.6)  Re[3]: ReactとASP.NETで通信エラー
□投稿者/ HattariB (55回)-(2023/01/18(Wed) 20:09:45)
No101222 (伝説のカレー さん) に返信
> あれ、違うかも
> 何らかのメソッドがリクエストされてNot SupportedだったのでOPTIONSが実行されましたってログなのかな
おそらくその通りだと思われます。
axiosはget&delete系と、put&post系でパラメータの積み方が異なる事があるみたいなんで、
正しいURLリクエストになってるかどうかを確認した方が良いかもです。
つttps://qiita.com/terufumi1122/items/670b1008956428a8cc8c

引用返信 編集キー/
■101226 / inTopicNo.7)  Re[1]: ReactとASP.NETで通信エラー
□投稿者/ WebSurfer (2611回)-(2023/01/18(Wed) 20:26:23)
No101220 (tosh さん) に返信

Visual Studio 2022 で作成する .NET 6.0 の React アプリは、Viusal Studio から
実行すると React 部分は Node.js 開発サーバーでホストされ (ホットリロードが可
能になっています)、サーバー側の ASP.NET Core アプリ (Web API を含む) は IIS
Express または Kestrel でホストされるようになっています。

Node.js 開発サーバーと IIS Express (または Kestrel) では必然的にホスト名が異
なりクロスドメインの問題が出ます。その問題を解決するために http-proxy-module
(HPM) という Node.js のプロキシを使っていて、Visual Studio から .NET 6.0 の
React アプリを起動するとプロジェクトに含まれている setupProxy.js の設定に従
い以下の画像の通り HPM を起動する画面が出ます。

http://surferonwww.info/BlogEngine/image.axd?picture=2022%2f3%2f0325HttpProxyModule.jpg

というわけで、そのあたりを考えないで LoginTokaController とか作っても動かな
いと思います。
引用返信 編集キー/
■101227 / inTopicNo.8)  Re[2]: ReactとASP.NETで通信エラー
□投稿者/ tosh (2回)-(2023/01/19(Thu) 10:19:20)
皆様、ご回答ありがとうございます。

ご教授頂いた内容を元に以下のサイトバインドを追加しましたが、結果は同じでした。
種類:https
IPアドレス:未使用のIPアドレスすべて
ポート:443
HTTP/2を無効にする
SSL証明書:IIS Express Development Certificate

またIEから送信を試みましたが、ブラウザに入力欄もボタンも表示されないため断念しました。

以下に追加情報を記します。

<開発・実行環境>
OS:Windows10
npmバージョン:8.19.2
バックエンド開発:VisualStudio2017
テンプレート:ASP.NET Core Webアプリケーション
  ASP.NET Core2.2 API
  
  
<フロントエンド側setupProxy.js>
const { createProxyMiddleware } = require('http-proxy-middleware');
const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:44321';

  const context = ["/api/"];

module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  });

  app.use(appProxy);
};

<バックエンド側launchSetting.json>
{
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": false, 
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:62768",
      "sslPort": 44321
      //"sslPort": 62768
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "launchUrl": "api/values",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "TokaBackendApi": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "api/values",
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

<フロントエンド開始時のログ>
C:\Users\sis\Documents\aspTestApp\ClientApp>npm start

> aspTestApp@0.1.0 prestart
> node aspnetcore-https && node aspnetcore-react


> aspTestApp@0.1.0 start
> rimraf ./build && react-scripts start

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
[HPM] Proxy created: /api/  -> https://localhost:44321
(node:12000) [DEP_WEBPACK_DEV_SERVER_HTTPS] DeprecationWarning: 'https' option is deprecated. Please use the 'server' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:12000) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(node:12000) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!

You can now view aspTestApp in the browser.

  Local:            https://localhost:44454
  On Your Network:  https://192.168.77.17:44454

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.



いくつか警告が出ているのが気になりますが、どうすれば改善するのか
調べてもよく分からないのが現状です。

引用返信 編集キー/
■101228 / inTopicNo.9)  Re[2]: ReactとASP.NETで通信エラー
□投稿者/ WebSurfer (2612回)-(2023/01/19(Thu) 10:28:58)
> 上記JSONをフロントエンドから送信すると、バックエンド側で以下のエラーが出て処理が行われず、応答もありません。
> Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/2.0 OPTIONS https://localhost:44321/api/LoginItems_Toka_/

HTTP メソッドの OPTIONS というのは CORS のプリフライトリクエストの際に出るものです。

> しかし同じJSONをPOSTMANから送信すると、以下の様なログが出て応答も返ってきました。

一方、POSTMAN はクロスドメインの制約とか関係ないので普通に要求が出て応答が返ってき
たのでしょう。

それから想像するに No101226 で私が述べたことは当たっていると思います。

だから No101223 で開発環境を聞いたのに答えがない。他の回答者のレスにも答えず無言。
質問者さんはギブアップしてすれっどは放置したのかな?
引用返信 編集キー/
■101229 / inTopicNo.10)  Re[3]: ReactとASP.NETで通信エラー
□投稿者/ WebSurfer (2613回)-(2023/01/19(Thu) 10:56:02)
No101227 (tosh さん) に返信

レスが前後してしまいました。

HTTP OPTIONS となったのは、クロスドメインになっているのでブラウザが CORS のプリフライト
リクエストを出したということに間違いなさそうです。

プロキシは設定しているようですがそれが期待通り動いてないのでは?

> const context = ["/api/"];

上記を

const context = [
"/api/LoginItems_Toka_
];

として試したらどうなりますか?

それでダメなら、Visual Studio 2022 を入手して .NET 6.0 で React アプリを作成することを
お勧めします。テンプレートですべての機能が組み込まれるし、第三者にも状況が分かるので
サポートしやすいので。
引用返信 編集キー/
■101234 / inTopicNo.11)  Re[4]: ReactとASP.NETで通信エラー
□投稿者/ tosh (4回)-(2023/01/19(Thu) 14:04:26)
WebSurfer様
回答ありがとうございました。

ご指摘頂いたプロキシ設定を"/api/LoginItems_Toka_"にしてみましたが、結果は同じでした。

またご教授頂いた内容から、以下のいずれかの方法で対処できるかもと考えて
調査と実験を行っておりました。

@ブラウザからプリフライトリクエストが出ない様な送信の仕方をする
Aバックエンド側でOPTIONSリクエストを処理できるようにする

このうちAは難しそうなので@の方法を調査したところ
JSONではなく文字列として送信すればOPTIONSが出ず、POSTリクエストが届くことが分かったので
JSONを文字列に変換して送信し、バックエンド側でJSONに戻そうと考えたのですが
バックエンド側のPOST受信メソッドが
public void Post([FromBody] string value) では415エラーでPOSTメソッドまで行かず
public void Post(string value) ではvalueがnullになってしまいました。
JSONではない単純な文字列でも同様です。
この部分をどうすれば取得できるのか調査したものの、方法が見つからなかったので
結局のところ、JSONのままやり取りできるのが最適だと理解しつつあります。

フロントエンドとバックエンドは同じサーバー上で動作し、
バックエンドはフロントエンドとだけ通信する前提でいるのですが
その場合は同じプロジェクト内で両者を一緒に動作させるのが普通なのでしょうか?
(それが可能なのかどうかさえ知らない超初心者です)
それが普通なら、バックエンド側のプロジェクトにフロントエンドを追加しようと思います。

引用返信 編集キー/
■101235 / inTopicNo.12)  Re[5]: ReactとASP.NETで通信エラー
□投稿者/ WebSurfer (2616回)-(2023/01/19(Thu) 14:56:02)
No101234 (tosh さん) に返信

> ご指摘頂いたプロキシ設定を"/api/LoginItems_Toka_"にしてみましたが、結果は同じでした。

プロキシは動いているのですか? 最初の質問で、

> Webアプリについては数日前にフロントエンドとバックエンドが別々に動作するプログラムで
> ある事を初めて知ったレベルの超初心者です。

と言ってた人が、フロントエンドの作成、バックエンドの作成、それにあったプロキシの設定が
できるとはとても思えないのですが、ちゃんと設定できているのでしょうか?

> @ブラウザからプリフライトリクエストが出ない様な送信の仕方をする

クロスオリジンの問題とそれを解決する手段の一つとしての CORS について勉強してください。

でないと話が通じません。ググって調べるといろいろ参考になる記事がヒットします。例えば
下記:

オリジン間リソース共有 (CORS)
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

上の記事に書いてある「単純リクエスト」であればプリフライトは発生しませんが、それでも
サーバー側で CORS に対応してないと(Access-Control-Allow-Origin ヘッダを返さないと)
ダメです。

> JSONではなく文字列として送信すればOPTIONSが出ず、POSTリクエストが届くことが分かったので

「単純リクエスト」であればブラウザからの POST 要求はサーバーに届くでしょうが、サーバ
ーから Access-Control-Allow-Origin が応答ヘッダに含まれて返ってこないとダメです。

初心者が行き当たりばったりで対症療法的なことをいろいろやるのは迷宮にはまり込むばかり
でかえって遠回りになると思います。

こちらも何をやっているのか分からないのでサポートできません。

上に書いたように、Visual Studio 2022 を入手して .NET 6.0 で React アプリを作成するこ
とをお勧めします。

そうしてもらえない限りこれ以上はお手伝いできません。
引用返信 編集キー/
■101238 / inTopicNo.13)  Re[6]: ReactとASP.NETで通信エラー
□投稿者/ tosh (6回)-(2023/01/20(Fri) 09:23:06)
WebSurfer様

ご回答ありがとうございました。

紹介頂いた資料その他を参照したところ、仰る通りクロスオリジンの問題だった様です。
バックエンド側にCORS対応の設定を追加し、プリフライトリクエストなしで
POSTリクエストを送信できるようになり、バックエンドからの返信も取れました。
これも対症療法なのかも知れませんが、知識不足でよく分からないので
時間のある時にフロントエンド側の作り直しも含めて勉強し直そうと思います。
解決済み
引用返信 編集キー/
■101239 / inTopicNo.14)  Re[7]: ReactとASP.NETで通信エラー
□投稿者/ WebSurfer (2617回)-(2023/01/20(Fri) 10:36:09)
No101238 (tosh さん) に返信

> バックエンド側にCORS対応の設定を追加し、プリフライトリクエストなしで
> POSTリクエストを送信できるようになり、バックエンドからの返信も取れました。

なんか変ですよ。

「プリフライトリクエストなしで」というのは、上に紹介した記事に書いてある「単純リクエスト」
の条件を満たしていればという話になります。

最初の質問のコードでプリフライトリクエストになったのであれば、それは「単純リクエスト」に
なっていないということです。

ASP.NET Core Web API 側で CORSを有効にしようがしまいが、そこは関係ないです。

> これも対症療法なのかも知れませんが、

CORS はセキュリティを緩和するということは覚えておいた方が良いと思います。

解決済み
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -