Не могу вызвать API с моего сервера из-за COR [дубликат] ⇐ Javascript

[Anonymous]

Я создаю настольное приложение todo, которое запускается локально на устройстве пользователя. Я использую Electron Forge + Vite + ReactJs и ExpressJs.
Структура папок:

Код: Выделить всё

src/
├─ db/
│  └─ database.js
├─ main/
│  └─ index.js
├─ preload/
│  └─ index.js
├─ renderer/
│  ├─ index.html
│  └─ src
|     ├─ main.jsx
│     ├─ App.jsx

src/main/index.js

Код: Выделить всё

import { app, BrowserWindow } from 'electron'
import path, { join } from 'path'
import { fileURLToPath } from 'url'
import express from 'express'
import cors from 'cors'
import db from '../db/database.js'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

// === Express API ===
const server = express()
const port = 4000

server.use(express.json())
server.use(
cors({
origin: '*',
methods: ['GET', 'POST'],
allowedHeaders: ['Content-Type', 'Authorization']
})
)

server.get('/api/hello', (req, res) => {
res.json({ message: 'Hello from Express API!' })
})

server.listen(port, () => console.log(`API server running at http://localhost:${port}`))

// === Electron Window ===
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: join(__dirname, '../preload/index.js'),
devTools: true,
sandbox: false
}
})

// Load local HTML (so the request will be from file://)
mainWindow.loadFile(join(__dirname, '../renderer/index.html'))

mainWindow.on('closed', () => {
db.close()
})
}

app.whenReady().then(() => createWindow())

src/renderer/index.html

Код: Выделить всё

Electron

src/renderer/src/main.jsx

Код: Выделить всё

import './assets/main.css'

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import { BrowserRouter as Router } from 'react-router-dom'

createRoot(document.getElementById('root')).render(





)

src/renderer/src/App.jsx

Код: Выделить всё

import React from 'React'
import { useState } from 'react'

fucntion App() {
const [todo, setTodo] = useState(null)

const fetchTodo = async () => {
try {
const response = await axios.get('http://localhost:4000/api/todos')
console.log(response)
} catch (err) {
console.log(err)
}
}

useEffect(() => {
fetchTodo()
}, [])

return (


)
}

Проблема в следующем: когда я использую Thunderclient или Postman для вызовов API, все работает нормально. Но когда я делаю запрос с использованием axios через интерфейс, я получаю strict-origin-when-cross-origin и отказываюсь подключаться к «http://localhost:4000/api/todos», поскольку это нарушает следующую директиву политики безопасности контента: ошибка «connect-src 'self' http://localhost».. Я попытался использовать Chrome для запуска http://localhost:5173 для проверки, но все равно получаю ту же ошибку.

Подробнее здесь: https://stackoverflow.com/questions/798 ... se-of-cors