React×Electron → FastAPIへのリクエストがNetwork Errorになってしまう。

実現したいこと

React×Electronのソースから、FastAPIのソースへの通信を行いたい。

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

Network Errorになってしまう。
■開発ツールのコンソール部分

■開発ツールのネットワーク部分

エラーメッセージ

error
1Refused to connect to 'http://127.0.0.1:8000/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

該当のソースコード

typescript
1import axios from "axios";
2import { error } from "console";
3export const requestSample = () => {
4    console.log("リクエスト開始")
5    const url = "http://127.0.0.1:8000/"
6    axios.get(url).then((res) => {
7        console.log("success res")
8    })
9        .catch((error) => {
10            if (error.response) {
11                console.error("Response error", error.response.status)
12            } else if (error.request) {
13                console.error("Request error", error.message)
14            } else {
15                console.error("Error:", error.message)
16            }
17        })
18}

python
1app = FastAPI()
2router = APIRouter()
3
4origins = ["*"]
5
6app.add_middleware(
7    CORSMiddleware,
8    allow_origins=origins,
9    allow_credentials=True,
10    allow_methods=["*"],
11    allow_headers=["*"],
12)
13app.include_router(sample_router)
14@app.get("/")
15def Hello():
16    return {"Hello": "World!"}

typescript(index.ts)
1function createWindow(): void {
2  // Create the browser window.
3  const mainWindow = new BrowserWindow({
4    width: 900,
5    height: 670,
6    show: false,
7    autoHideMenuBar: true,
8    ...(process.platform === 'linux' ? { icon } : {}),
9    webPreferences: {
10      preload: join(__dirname, '../preload/index.js'),
11      sandbox: false,
12    }
13  })
14
15  mainWindow.on('ready-to-show', () => {
16    mainWindow.show()
17  })
18
19  mainWindow.webContents.setWindowOpenHandler((details) => {
20    shell.openExternal(details.url)
21    return { action: 'deny' }
22  })

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

コンソールに表示されている下記のメッセージで検索をかけましたが解決できそうな記事を見つけられませんでした。
Refused to connect to 'http://127.0.0.1:8000/' because it violates the following Content Security Policy directive:

補足

electron version: 31.0.2
react version: 18.3.1
python version: 3.12.2
fastAPI version: 0.115.6

行動規範の内容に同意します

回答1件

自己解決

index.htmlの<meta>タグ内のconnect-srcの設定を加えたところうまくいきました。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src

index.html
1<!doctype html>
2<html>
3  <head>
4    <meta charset="UTF-8" />
5    <title>Electron</title>
6    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
7    <meta
8      http-equiv="Content-Security-Policy"
9      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src http://localhost:*;img-src 'self' data:"
10    />
11  </head>
12...
13