LINUX.ORG.RU

WebDev-2025. CORS.

 , reactjs, spa,


0

2

Года 3 не держал в руках ReactJS с fetch и не заглядывал в консоль браузера. Благо должность располагает.

И что же я обнаружил сейчас? Браузеры сплошную обложены CORS защитой. Локальная разработка превращается в ад - реакт-дев-сервер работает на localhost:3001, сервер работает на localhost:8080 - и привет всем запросам фронт-бэк! Либо CORS и запрос не проходит, либо результат reponse.statusCode=0.

Хочу спросить у благородных донов и девиц. Как вы осуществляете разработку современных SPA в условиях 2025?

зы. (оффтоп) Я давненько не посещал форум, вы все так же оправдываетесь, зачем вы пишите в development, а не в talks? типа «потому что я веб-дев делаю на линуксе» - да? или уже повзрослели?

★★★★★

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Хочу спросить у благородных донов и девиц. Как вы осуществляете разработку современных SPA в условиях 2025?

Настраиваю CORS на сервере правильно.

Если ты только фронтендер, а на бекенде у тебя Столяров который не хочет этим заниматься, то есть https://chromewebstore.google.com/detail/cors-unblock/lfhmikememgdcahcdlacilo...

MOPKOBKA ★★★★★
()
Последнее исправление: MOPKOBKA (всего исправлений: 2)
Ответ на: комментарий от MOPKOBKA

Настраиваю CORS на сервере правильно.

Ну, допустим, python, tornado

        req.set_header("Access-Control-Allow-Origin", "*")
        req.set_header("Access-Control-Allow-Methods", "POST")
        req.set_header("Access-Control-Allow-Headers", "X-Requested-With")
bvn13 ★★★★★
() автор топика
Ответ на: комментарий от bvn13

«Access-Control-Allow-Origin», «*»

Укажи реальные Origin.

«Access-Control-Allow-Methods», «POST»

GET никогда не бывает?

«Access-Control-Allow-Headers», «X-Requested-With»

Сомневаюсь что это единственный Header.

MOPKOBKA ★★★★★
()

Про заголовки на сервере уже сказали, если есть сессия еще нужно, чтобы фронт при запросе выставлял заголовок Access-Control-Allow-Credentials: true

goingUp ★★★★★
()
Ответ на: комментарий от bvn13

я фронт, я не дам тебе вызвать бэкенд, потому что дядя сказал, что CORS - это ай-ай-ай

Так это бэк должен разрешить браузеру выполнить запрос. Для того-то вместе с локальным дев-сервером иногда поднимается прокси, через который идёт общение с сервером.

static_lab ★★★★★
()

Настраиваешь проксирование API на бекэнд в dev-сервере бандлера.

Webpack: https://webpack.js.org/configuration/dev-server/#devserverproxy

Vite: https://vite.dev/config/server-options#server-proxy

Rsbuild: https://rsbuild.dev/config/server/proxy

Настраивается в 1-2 строчки (раз ты используешь React, у тебя по-любому есть какой-нибудь бандлер) и, соответственно, для браузера выглядит как будто запрос идёт на тот же origin и CORS доволен.

KivApple ★★★★★
()
Последнее исправление: KivApple (всего исправлений: 1)

Всё очень просто - http api ко всяким серверным сервисам должны быть на том же домене где html-страница твоего так называемого приложения. В тех редких случаях, когда у тебя очень большой сервис о он не влезает в один сервер - на вспомогательных прописывается access-control-allow-origin с доменом главного серрвера.

firkax ★★★★★
()
Ответ на: комментарий от bvn13

req.set_header(«Access-Control-Allow-Origin», «*»)

Это прямая дорога к дырам. Домен надо прописывать конкретный а не разрешать всем подряд. CORS-защита сделана не из вредности, её надо не отключать а правильно настраивать.

firkax ★★★★★
()