Уважаемые господа, есть вопрос, связанный с отладкой js при использовании react.
История равивалась так:
- Сначала я разработал простое SPA приложение в стиле "тонкий клиент": просто веб -страница, на которой работает js-код. Это код вызывает REST методы на сервере и отображает данные.
Сервер, который реализует всю эту функциональность - простой код (на С++, запускается на порту 9000), который умеет
отдавать статические файлы
отвечать на REST - запросы клиента
- Теперь я переписываю клиентское приложение на react. Сервер я хочу оставить без изменений!
Для этого я взял тот шаблон, который называется в руководствах по реакту Create React App.
После команды
npx create-react-app my-app
я получил папку, в которой есть подпапки node_modules, public, src, а также несколько файлов.
После запуска приложения
cd my-app
npm start
мой браузер заходит на страницу http://localhost:3000/ .
Самое приятное в этом процессе - что если я меняю код компонентов, находящихся в папке src, то в барузере автоматически рефрешится страница, и отображаются изменения, которые я внёс.
Но есть проблема. Для того, чтобы этот процесс происходил, надо, чтобы работал сервер node.js на 3000-м порту.
А чтобы я мог из react - приложения вызывать rest - методы своего сервера, он должен быть запущен, и код, работающий в браузере, должен быть загружен с моего сервера.
При попытке отлаживаться с запущенной node.js ни одно обращение к моему серверу не произойдет: происходит ошибка CORS policy (см. )
Я могу обойти эту проблему так:
я запускаю команду npm run build
, в результате в react-проекте создаётся папка build.
Потом я перекладываю её содержимое в ту папку моего собственного сервера, из которой происходит раздача статиеских файлов.
Тогда - "всё работает", то есть, по крайней мере, обращение к моему серверу на блокируются CORS policy. Но это сильно усложняет отладку: при внесении малейшего изменения в код на js нужно пересобрать приложение, переложить его и отрефрешить страницу в браузере. Причем js - код там уже "упакован", то есть, при возникновении ошибки в браузере номер строки с ошибкой не соответсвует стоке исходного кода (ведь именно в этой "упаковке" и заключается сборка react - приложений)
Я думаю, что есть какой то более правильный способ отладки REST - приложений, написанных на реакте. Но я этого способа не знаю. Подскажите мне, пожалуйста, как делать такую отладку?
Дополнение.
По совету, который мне дали в комментариях, я дописал в вызов вот такой код:
devTool = ()=>{
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
axios.defaults.headers.post['Access-Control-Allow-Methods'] = '*';
axios.defaults.headers.post['Access-Control-Allow-Headers'] = 'origin, content-type, accept';
// // let config = {
// headers: {
// 'Access-Control-Allow-Origin': '*',
// 'Access-Control-Allow-Methods': '*',
// 'Access-Control-Allow-Headers': 'origin, content-type, accept'
// }
// }
let data = { "req_type": 3}
axios.post('http://charts.eurotest-online.ru/api/Techreglaments/', data)
}
К сожалению, это не помогло - я по прежнему получаю ошибку CORS:
У меня впечатление, что это просто какая то проблема с синтаксисом. Не могли бы Вы глянуть опытным взглядом, что я делаю не так? Спасибо!
Дополнение номер два.
Большое спасибо Вам за подсказки.
Я хотел сделать изящное решение, не использующее промежуточный прокси.
Сделал еще один "подход к снаряду".
Итак, у меня два серера: node 'для реакта' на порту 3000 и REST - сервер на порту 9000. Оба на localhost.
Мне @Alex Krass любезно подсказал, что HTTP header 'Access-Control-Allow-Origin': '*' должен посылаться со стороны сервера, отвечающего на REST - запросы.
Отлично.
Я добавил в заголовки http-ответа ВСЕ разрешения, котрые нагуглил:
resp.set("Access-Control-Allow-Origin", "*");
resp.set("Access-Control-Allow-Methods", "*");
resp.set("Access-Control-Allow-Headers", "*");
Проверил постменом.
Постман заголовки в ответе сервера видит:
Но.
К сожалению, проклятая ошибка
"Access to XMLHttpRequest at 'http://localhost:9000/api/Techreglaments/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource"
осталась на месте.
Причем, на REST - сервер при запросе со стороны браузера приходит запрос типа OPTIONS. А когда я тестирую постменом - всё хорошо, приходит POST - запрос.
Я просто уже не знаю, что думать.
Привожу текст ошибки в виде картинки:
Если Вы сможете увидеть в ней что то, что я пропустил - напишите, пожалуйста.
Спасибо заранее!
Access-Control-Allow-Origin: *
. Поскольку это браузер, не получаю нужный HEADER, блокирует запрос. В противном случае придется извращаться и делать какие-либо промежуточные тестовые примеры.простой код (на С++, запускается на порту 9000)
. Заголовки должны возвращаться с его стороны.