Reactからのhttp通信は，クライアント機（ユーザー）のIPを使用するのでしょうか。

実現したいこと

○Webアプリケーション
フロントエンドとバックエンド間の通信で
バックエンドの通信をクライアントから受け付けたくない

Firewallの設定で，バックエンドサーバーの受け先をフロントエンドのIP（ドメイン）のみにしたい。

前提

○フロントエンド
React + typescript
使用しているhttp通信用ライブラリ：Axios
入力された内容をJsonにしてhttp通信でバックエンドに送る処理をしています。

○バックエンド
fastApi + uvicorn + nginx
POSTされた情報をDBに書き込む処理をしています。

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

閲覧いただきありがとうございます。

現在開発しているウェブアプリケーションでは
セキュリティを重視したく，できるだけネットワーク周りに制限をかけたいと考えています。

私の想定だと，フロントエンドに入力された内容をバックエンドに送信するとき。
フロントエンド側のサーバーから（IPから）バックエンド側のサーバーに，入力された内容を飛ばす想定でしたが
バックエンド側の通信を見ると，クライアント機（フロントエンドにアクセスしている端末）から
バックエンドに通信をしていました。

ここで私がお伺いしたいのは
Reactを使う以上，この仕様は避けられないのでしょうか。

また，何か良い対策や解決方法があればご教示いただけますと幸いです。

該当のソースコード

※関係なさそうなところは削除しております
また，一部値を書き換えております。

フロントエンド

ts
1 const sendInfo = async () => {
2        await axios
3            .post(
4                API_URI + "URL",
5                JSON.stringify({
6                    id: location.state.id,
7                }),
8                {
9                    headers: {
10                        "Content-Type": "application/json",
11                    },
12                }
13            )
14            .then((res) => {
15                localStorage.setItem('display', 'ok')
16                navigate("/succsess")
17            })
18            .catch((error) => {
19                console.log(error);
20            });
21    };

バックエンド

python
1import sys
2import smtplib
3from email.mime.text import MIMEText
4from fastapi import FastAPI
5from starlette.middleware.cors import CORSMiddleware
6from pydantic import BaseModel
7from dotenv import load_dotenv
8
9load_dotenv()
10
11class inPut(BaseModel):
12    id: number
13
14app = FastAPI()
15
16app.add_middleware(
17    CORSMiddleware,
18    allow_origins=["*"],
19    allow_credentials=True,
20    allow_methods=["*"],
21    allow_headers=["*"],
22    expose_headers=["Content-Disposition"]
23)
24
25@app.post("/URL")
26async def kansu(input: Input):
27※処理
28
29uvicorn.run("index:app", host="0.0.0.0", port=18008, ssl_keyfile="./cert/server-privatekey.pem", ssl_certfile="./cert/server-crt.pem")

試したこと

バックエンドのNginxに
allow フロントエンドIP
deny all
としたところ，今回の問題が発生しました。

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

フロントエンド
Xserver

バックエンド
社内仮想サーバー（Almalinux9）

hoshi-takanori

2023/06/02 09:29

フロントエンドって何のことですか？ (普通はブラウザのことを指すような…) もしかして、本番環境で webpack-dev-server を動かしてますか？

kkrn

2023/06/02 10:17

コメントありがとうございます。分かりずらい記載、大変失礼致しました。フロントエンド→ブラウザで閲覧出来るウェブサイトという認識でございます。本番環境はまだありませんが検証環境ではビルド後のファイルをWebサーバーに配置しております。よろしくお願いいたします。

hoshi-takanori

2023/06/02 10:34

謝ってほしいのではなく、たぶん何か誤解があると思うんですよね…。 React を含め、JS のコードは基本的にはブラウザ上で動きますので、API を叩くならブラウザと API サーバーが直接やりとりすることになるのが一般的かと。

quickquip

2023/06/02 11:08 編集

勝手に想像するとこういうことなのではないかと思いました XServer （質問者さんはここをフロントエンドと言っている） ↑② ││(社内のIPアドレスが入ったコンテンツ) ││ --------------- 社のFW ││ ①↓ ブラウザ/クライアント（世間的にはフロントエンドと言われるとここだと思う）　　③↑ 　　││ 　　↓④ バックエンド