React + Axios + FastAPIでレスポンス200なのにエラーが発生する

Question

前提

React + Axios + FastAPIでWEBアプリを作っています。
axiosでlocalhostに対してGETを行っても、サーバー側では200 OKと表示されているのに、ブラウザ側ではエラーとなり値が受け取れません。
reactはnpxのcreate-react-appで作成し、npm startでlocalhost:3000にて動いています。
FastAPIはlocalhost:8000で動いています。

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

{
    "message": "Network Error",
    "name": "AxiosError",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {
            "FormData": null
        },
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://localhost:8000"
    },
    "code": "ERR_NETWORK",
    "status": null
}

該当のソースコード

import React from "react";
import axios from "axios";

export default function Test() {
	const onclick = () => {
		axios.get("http://localhost:8000")
			.then((res) => {
				console.log(res)
			})
			.catch((err) => {
				console.log(err)
			})
	}
	return (
		<div onClick={onclick}>Click!</div>
	)
}

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"Hello": "World"}

Answer 1

CORSが原因だったようで、main.pyに以下の記述を追加したところ直りました。

from starlette.middleware.cors import CORSMiddleware # 追加

app = FastAPI()

# CORSを回避するために追加（今回の肝）
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,   # 追記により追加
    allow_methods=["*"],      # 追記により追加
    allow_headers=["*"]       # 追記により追加
)