常連

### 実現したいこと
Next.jsを使ってローカルで自作アプリを作っています。
サーバーサイド言語とフロントを別々にして作っていて、fetch関数でサーバーからのデータを取得していますが、fetch関数とjson関数でJSON化した後の、配列内のオブジェクトの中身が実際の中身と異なっています。




### 発生している問題・分からないこと
先述のとおり、fetch関数でサーバーからのデータを取得してjson関数でJSON化した後の、配列内のオブジェクトの中身が実際の中身と異なっています。


サーバー言語のデバックで取得したJSONと
フロント側でfetch関数＆json関数で取得したJSON
内の配列内のオブジェクトの数が異なります。

より詳しい情報はソースコードを後述します。
（keyなどの文字列は変えています。）




### 該当のソースコード

```
//サーバー言語のデバックで取得したJSON
[
  {
    class: [
      {
        name: "class1",
        grade: "XX",
      },
      {
        name: "class2",
        grade: "XX",
      },
    ],
  },
  {
    user: [
      {
        name: "XXXX",
        age: "XX",
        grade: "XX",
      },
      {
        name: "XXXXXXXXXX",
        age: "XX",
        grade: "XX",
      },
    ],
  },
]
```

```
//フロント側でfetch関数＆json関数で取得したJSON
[
  {
    class: [
      {
        name: "class1",
        grade: "XX",
      },
      {
        name: "class2",
        grade: "XX",
      },
    ],
  },
  {
    user: [
      {
        name: "XXXX",
        age: "XX",
        grade: "XX",
      },
      //配列内のオブジェクト内の数が一つしかない
    ],
  },
]
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
バックエンドのソースコードを確認してみましたが先述した戻り値と変わらずでした。

### 補足
Next.js（Ver14）


[JavaScript]fetch関数で取得したJSONデータが実際の返り値の形と異なる

### 実現したいこと
JavaScript（Next.js）で自作アプリを作っています。
サーバーサイド言語とフロントを別々にして作っていて、fetch関数でサーバーからのデータを取得していますが、url文字列の生成方法でfetch関数がエラーになったりならなかったりします。


後述するソースコードのようにバッククォートを使ったURL文字列の中に変数埋め込みで生成したurl文字列だと、バックエンド側でパラメーターが"undefined"に変換されてエラーになります。

解消方法をご存じの方いたらよろしくお願いしまします。

### 発生している問題・分からないこと
先述したとおりURL文字列の中に変数埋め込みで生成したurl文字列だと、バックエンド側でパラメーターの値が"undefined"に変換されてエラーになります。



### 該当のソースコード

```
export async  function fetch(num) {
  console.log(num)// -> 0
  let param1= num;
  let param2= num+3;
  const url1 =`http://localhost:3000/top?paramA=${param1}&paramB=${param2}`;
  const url2 =`http://localhost:3000/top?paramA=${0}&paramB=${3}`;

  const res = await fetch(url1);          //url1はバックエンド側でparamAの値が"undefined"に置き換わられていてエラーになるが、url2はちゃんと数値が渡されていてエラーにならない
  const result = await res.json();
  return result
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
バックエンド側でデバックしたらリクエストパラメーターの値が"undefined"に置き換わられていてエラーになる

※追記
コンソール上でurl1を確認したら、
http://localhost:3000/top?paramA=0&paramB=3
と出力されました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-24/3a2733c1-d466-4749-99bb-2ed835336808.png)


[Javascript] url文字列の生成方法でfetch関数がエラーになったりならなかったりする

### 実現したいこと
Next.jで自作アプリを作っています。（Next.jsは初心者です。）
PropsやStateの仕組みを少し理解できたと思うところでリストを作ろうとしていますがうまくいきません。サーバーサイド言語とフロントを別々にして作っていて、fetch関数でサーバーからのデータを取得していますが、fetch関数実行時に「TypeError: Failed to fetch」のエラーがでて失敗します。

作ろうとしているリストは、一番下に"さらに表示"ボタンのようなボタンがあり、それを押すごとにN個ずつ外部から続きのリストデよータを取得してきて、後ろに追加していき縦に長くなっていくようなものです。

実装的な構想としては、コンポーネントが呼ばれたらリストのデータをfetchしてきて、それをuseState()で監視させ、リストの更新時には再度fetchしてきて既存のリストデータと合体させるような形で更新していくような作りを想定しています。（この作成方針で絶対実現したいとかではなく、自分の技術レベルの範囲内で実現方法を考えた結果たどり着いた方法です。）

**9/21 8:00追記**
ブラウザのコンソールを見ると、画像のようなエラーが出ていて、これを調べたらCORSエラーというエラーが原因となっているようでした。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-21/91c5972e-351a-48cb-a8eb-0845c25c103e.png)
解消方法を調べてみたところ、通信時のhttpヘッダにアクセスを許可するような修正が必要との様子だったので[こちら](https://zenn.dev/ako/articles/e91075b08da785)を参考にfetch関数を後述の通り修正を加えました。
ですが変わらず、コンソール上でエラー出ています。
解消方法をご存じの方いたらよろしくお願いしまします。



### 発生している問題・分からないこと

前置きが長くなりましたが、問題となっているのは、後述するソース内でfetch関数が裏で失敗しているところです。エラー画面上に「TypeError: Failed to fetch」と大きく表示されています。（それ以前に呼ばれたコンポーネント内の要素は描画されている）

解決方法をご存じの方がいたらよろしくお願いします。



### 該当のソースコード

```
"use client";
import { useEffect, useState } from 'react';
import { fetchUser } from '@/lib/getter';

const getUserList = async () => {
    const userList = await fetchUser();        //３fetchUser()内でfetch関数が呼ばれリストのデータが返される（ここで失敗する。）
    return userList;
};

export default  function MakeList() {        //１コンポーネントが呼ばれる
    const [userList, setUser]  = useState([{}]);

    useEffect(() => {
        const fetchedUser = getUserList();        //２useEffectが実行されgetUserList()が呼ばれる
        setUser(fetchedUser)        //４取得したリストデータをsetUser()で監視する。（エラーのためここは実行されない）
      }, []);

    return ( 
        <>
            {userList?.map((obj) => (
                <React.Fragment key={obj.lisId}>
                    <div key={obj.lisId}>
                        <div>
                            {obj.user}
                        </div>
                    </div>
                </React.Fragment>
            ))}    
        </>
    );
}


```

```
////以下のような構造でリストデータを作り、userListで監視させようとしています。

    listData: [
      {
        user: "田中",
        listId: "1",

      },
      {
        user: "佐藤",
        listId: "2",

      }
      //更新するごとに続きが追加されていくような
    ]

```

9/21 8:00追記 
修正したfetchのソース
```
  const res = await fetch(`http://localhost:3000/top?XXXXXXX=${XXXXXXXX}`, {
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type, Authorization",
    },
    method: 'GET',
    cache: 'no-store',
  });
  const result = await res.json();
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他


##### 上記の詳細・結果
![エラー画面](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-20/77b6cb9c-7f00-4a8f-b7b4-e1440a3739b0.png)

### 補足
Next.jsバージョン：(14.2.11)

[Next.js] バックエンド側のAPI取得時にCORSエラーでfetch失敗する。

### 実現したいこと
Next.jsを使ってローカルで自作アプリを作っています。
サーバーサイド言語とフロントを別々にして作っていて、fetch関数でサーバーからのデータを取得していますが、fetch関数実行時に「TypeError: Failed to fetch」のエラーがでて失敗します。

ブラウザのコンソールを見ると、口述する画像のようなエラーが出ていて、これを調べたらCORSエラーというエラーが原因となっているようでした。さらに調べると異なるオリジン間でのWebリソース共有を制御するしくみが働いているために発生している事象とのことでした。

これを回避するために、[こちら](https://qiita.com/flu_bit/items/80b34526ffe25169c76a)を参考にまずはバックエンド側でCORS設定を施そうと検討しています。

ですが変わらず、コンソール上でエラー出ています。
解消方法をご存じの方いたらよろしくお願いしまします。

### 発生している問題・分からないこと
↓ブラウザのコンソールエラー
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-21/eab3931e-4cb6-4d4b-9779-60caa59eb015.png)

※http://localhost:3000/top がバックエンドサーバーのURL（フロント側のfecth関数内のurlの箇所に記載しているurl）
※http://localhost:3001 はフロント側のURL（ブラウザにURL入力するURL）



### 該当のソースコード

```
Rustのルーティング設定

use std::env;
use axum::response::{IntoResponse, Redirect};
use http::{header::HeaderValue};
use dotenv::dotenv;
use crate::career_contents::{edit_career, show_career, create_career};
use crate::auth::{sign_up, login};
use tower_http::cors::CorsLayer;

pub async  fn running_router()  {
  let origins = [
    "http://localhost:3001".parse::<HeaderValue>().unwrap(),      //フロント側（http://localhost:3001）からのアクセスを許可するよう設定
];

    let app = axum::Router::new()
    
    .route("/top", axum::routing::get(show_career::show_top))
    .layer(          //layerを新しく追加した。
      CorsLayer::new()
          .allow_origin(origins)
  );
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
先述した通り変わらず、コンソール上でエラーが出ています。


### 補足
Next.jsバージョン：(14.2.11)

[Rust] axumでCORSエラーの回避設定がうまくいかない

現在とあるセンサとの通信システムの開発を行っています

そのセンサ会社からは、POSTメソッドでデータを送信する仕様と聞いていたのですが、実際に通信テストを行ったところ、BODY部分（form）にはデータが含まれておらず、GETメソッドでのリクエストのようにURLの後ろへデータが付加されていました。（例えばhttp://192.168.1.1?aaa=bbbのようなイメージです）

その為、先方に対し、BODY部へデータを格納し、URLの後ろへはデータを付加しないよう修正を依頼したいと考えていましたが、通常のPOST通信の方法とは異なると思いますが、「POST通信でデータを送る」という内容に間違いはありませんでしたので、修正を依頼してよいものか悩んでいます

このようにPOST通信であるのにURLの後ろにデータを付加して通信するのはHTTPの通信規約などには違反していないのでしょうか？それとも正常な通信方法でしょうか？
ご教示ください

POST通信なのにURLの後にパラメータを付与するのはアリ？

### 目的
C#でHTTP通信を行い、その結果を取得したいと思っています。
（最終的にはWeb APIを叩くことが目的です）
資料となるサイトを参考にコードを書いてみたのですが応答が返らず、対処方法が分からないので教えていただきたいです。

### 実装
まっさらなC#/Formsアプリに、ボタンを一つだけ用意します。
ボタンを押すとWebアクセスを試みるだけのプログラムです。

[フォーム側(ボタンを押すとアクセス)]
```C#
    public partial class MainWindow : Form
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btnRequest_Click(object sender, EventArgs e)
        {
            Uri uri = new Uri("http://www.google.com");
            // ここでwebアクセスを行う
            Task<string> webTask = WebConn.GetApiAsync(uri);
            string result = webTask.Result;
            Console.WriteLine(result);
        }
    }
```

[アクセス処理(WebConn)]
```C#
    public class WebConn
    {
        public static async Task<string> GetApiAsync(Uri uri)
        {
            using (HttpClient client = new HttpClient())
            {
                // ヘッダ情報設定
                client.DefaultRequestHeaders.Add("User-Agent", "Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko");
                client.DefaultRequestHeaders.Add("Accept-Language", "ja-JP");
                client.Timeout = TimeSpan.FromSeconds(5.0);

                try
                {
                    // 実際のアクセス処理はここだけ
                    string res = await client.GetStringAsync(uri);
                    // ここに辿りつけない
                    return res;
                } catch(HttpRequestException e)
                {
                    // 例外処理（省略）
                }
                return null;
            }
        }
    }
```

### 発生している問題
上記のコードを実行しフォームに用意したボタンを押したところ、ウィンドウが操作を受け付けない状態になります。
具体的には、上記コード（アクセス処理）の
`string res = await client.GetStringAsync(uri);` を実行した後、次の `return res;`に辿り着きません。
また、実行時に例外が発生することもありません。

### 参考資料
@ITの記事
http://www.atmarkit.co.jp/ait/articles/1501/06/news086.html
に掲載されているコードを、ほぼ流用しています。

### その他
C#を用いて通信を行うのは初めてです。
もしHttpClient使うより良い方法があれば教えてください。
（ところでteratailでは、C#のコードはシンタックスハイライトされないのでしょうか…？）

C#でHTTP通信を行う方法（HttpClientを用いる場合）

###概要
PHPなどでのサーバー開発をすることは得意ですが、
Webネットワークの知識が少し薄く、
サーバー通信時の通信量が実際数値としてどれほどのものかわかりません。
GoogleChromeのコンソールを見るも、いまいちピンとこず・・・といった感じです。

###知りたいこと

たとえばですが

http://example.com/ あるいは https://example.com/
にPOSTパラメーターとしてx=100が付与されているものとする。
その場合、以下ソースコード
```php
<?php
echo $_REQUEST["x"];
exit;
```
が実行され、
```
100
```
が出力されるものとする。
その場合、httpとhttps、それぞれどの程度の通信量が発生するのでしょうか？
※大雑把で大丈夫です、理屈がわかればだいたいの予測はつきます。
恐らく、リクエストおよびレスポンスそれぞれで発生するのだと思っています。
なんとなくでは把握していますが、かなり曖昧な知識なので詳細を知りたいと思っています。

お手数をおかけいたしますが、よろしくお願いいたします。

http、httpsでのサーバー通信時の通信量について

Windows10Pro x64 ＋ VS2017 ＋ .NET Framework3.5で、以下のコードで例外出ない方、いらっしゃいますでしょうか。
あるいは、解決方法どなたかご存知でしょうか。

```
HttpWebRequest req = (HttpWebRequest)WebRequest.Create("https://www.tanabe-ind.co.jp/");
req.Timeout = 900000;
using (HttpWebResponse res = (HttpWebResponse)req.GetResponse())	//ここで例外
{
}

```

```
System.Net.WebException: '基礎になる接続が閉じられました: 送信時に、予期しないエラーが発生しました。'
内部例外:
IOException: トランスポート ストリームから予期しない EOF または 0 バイトを受信しました。
```

ちなみに同じコードで.NET Framework4.0なら通ります。
また、上記以外の大抵のサイト（例えば https://www.google.co.jp/）も通ります。
上記サイトはie等ブラウザで普通に見れるところです。

Fiddlerで確認したリクエストヘッダは以下の通り。

ieのリクエストヘッダ
```
CONNECT www.tanabe-ind.co.jp:443 HTTP/1.0
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko
Content-Length: 0
Host: www.tanabe-ind.co.jp
Connection: Keep-Alive
Pragma: no-cache

A SSLv3-compatible ClientHello handshake was found. Fiddler extracted the parameters below.

Version: 3.3 (TLS/1.2)
～以下略～
```

上記コードでのヘッダ（.net3.5・4.0同じ）
```
CONNECT www.tanabe-ind.co.jp:443 HTTP/1.1
Host: www.tanabe-ind.co.jp
Connection: Keep-Alive

A SSLv3-compatible ClientHello handshake was found. Fiddler extracted the parameters below.

Version: 3.1 (TLS/1.0)
～以下略～
```

色々調べて、事前に下記コードを入れたりもしましたが駄目でした。
TLS/1.2でも1.0でも、.net4.0なら通り、3.5なら例外です。

```
ServicePointManager.SecurityProtocol = SecurityProtocolType.Ssl3 | SecurityProtocolType.Tls | (SecurityProtocolType)0x00000C00 | (SecurityProtocolType)0x00000300;
```

あと、足りないヘッダを補おうと下記コードを入れても、送り先がhttpsだとヘッダに変化無いのはそういうものでしょうか。（.net3.5・4.0両方とも）

```
req.UserAgent = "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko";
req.ContentLength = 0;
req.KeepAlive = true;
req.Headers["TEST"] = "TEST";
```

.NET4系に移行してしまえば済む話なのですが、とりあえず解決はしておきたく、ここに書きました。どなたか情報ご存知でしたらお願いします。