同じローカル ネットワーク上の別のマシンから FastAPI バックエンドにアクセスするにはどうすればよいですか?

同じローカル ネットワーク上の別のマシン/IP から FastAPI バックエンドにアクセスするにはどうすればよいですか?

FastAPI バックエンドと Next.js フロントエンドを別のマシンで実行する場合同じローカル ネットワークにある場合、フロントエンドからバックエンドにアクセスすると問題が発生する可能性があります。

ホスト フラグを次のように設定します。 0.0.0.0

別のマシンからのアクセスを許可するには、uvicorn コマンドでホスト フラグを 0.0.0.0 に設定します。

uvicorn main:app --host 0.0.0.0 --port 8000

これにより、バックエンドがそのマシンのすべての IPv4 アドレスをリッスンできるようになります。ローカル マシン。

ファイアウォール設定の調整

ファイアウォールが指定されたポートへの外部アクセスを許可します。 Python の受信ファイアウォール ルールを作成します。通常、Python がファイアウォールを介した通信を許可されている場合に自動的に追加されます。

CORS 設定の調整

クロスオリジン リクエストを有効にするように CORS ミドルウェアを構成します:

origins = ['http://localhost:3000','http://192.168.178.23:3000']

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

JavaScript で HTTP リクエストを作成する

JavaScript のフェッチリクエストでも同じものを使用しますブラウザのアドレス バーに入力されたドメイン名とバックエンドのポート番号:

fetch('http://192.168.178.23:8000/people', {...

同じマシン上でローカルにテストする場合は、正しいドメイン名 (例: http://127.0.0) でフェッチを使用します。フロントエンドとバックエンドの両方が同じポートと IP で実行されている場合は、0.1:8000/people) または相対パス (例: '/people')。フロントエンドのオリジンがバックエンドのオリジンと異なる場合は、それを CORS 設定に追加します。

以上が同じローカル ネットワーク上の別のマシンから FastAPI バックエンドにアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。