+ Запитати

Як виправити помилку «CORS policy: No Access-Control-Allow-Origin» при запиті з фронтенду до Express API?

Вирішено141 переглядівПрограмуванняjavascript nodejs react
0
0 коментарів

Розробляю SPA на React (порт 3000), яке робить fetch на Express API (порт 5000). У браузері вилазить помилка:

Access to fetch at "http://localhost:5000/api/users" from origin "http://localhost:3000" has been blocked by CORS policy

Як це виправити правильно — і на dev, і на prod?

Питання закрите для нових відповідей.
Експерт обрав найкращою

1 Відповідь

0
denys_itpedia102 0 Коментарі

Ця помилка виникає, бо браузер блокує запити між різними origin-ами без явного дозволу. Express треба сказати, які origin-и довіряти.

Найпростіше рішення — пакет cors

npm install cors
const express = require("express");
const cors = require("cors");
const app = express();

// Дозволити лише ваш фронтенд
app.use(cors({
  origin: process.env.NODE_ENV === "production"
    ? "https://yourapp.com"
    : "http://localhost:3000",
  credentials: true,
}));

Якщо потрібні cookies / авторизація

На фронті обовʼязково додайте credentials: "include" у fetch:

fetch("http://localhost:5000/api/users", {
  credentials: "include",
});

На production — краще через proxy

Замість того, щоб тримати CORS в Express, винесіть фронт і API під один домен через nginx або Vercel/Netlify rewrites:

/api/* → backend.yourapp.com

Тоді CORS взагалі не потрібен — обидва запити йдуть з одного origin.

Експерт обрав найкращою
You are viewing 1 out of 1 answers, click here to view all answers.
Запитати