React приложение, как в режиме разработчика получать данные с сервера?

Question

[Evgeny1998]

У нас есть приложение на собственном сервере. Раньше фронтенд был на нативном js, теперь решили переписать фронт на react JS.
Я создал приложение с помощью по базовой команде create-react-app и начал писать, задеплоил на сервер и все работает, но возникла проблема:
В режиме разработчика, когда я пишу приложение локально я не могу обращаться к API сервера, т.к. там нужны куки ,которых нет если не залогиниться. (И получается что я могу проверять результат работы только, после билдинга и заливки кода на сервер, это очень не удобно.
Ребят что делать? Помогите, пожалуйста!

Answer 1

[Егор Живагин]

Прописать в hosts хостнейм для 127.0.0.1 такой, который подходит под domain куки и открывать его в браузере
+ возможно к этому нужно будет добавить настройку host в вебпаке

Либо можно через proxy в вебпаке переписывать домен куки и ставить их на локалхост

Comments

[Evgeny1998]

Спасибо за ответ, а можете немного пояснить , где этот хост находиться? И где в вебпаке нужно подписать. И по поводу proxy поясните пожалуйста!

[Егор Живагин]

Evgeny1998, про всё это можно почитать вот тут - https://webpack.js.org/configuration/dev-server/

Как добраться до вебпак конфигов в проекте с create-react-app я не знаю, но помню, что сделать это можно

[Егор Живагин]

Evgeny1998, "Прописать в hosts хостнейм для 127.0.0.1" -- это про файл /etc/hosts , если у вас linux/mac

кстати, если вы указываете host через конфиг вебпака, то в /etc/hosts ничего менять не нужно

[Егор Живагин]

Evgeny1998, пример настроенного конфига

devServer: {
      port: 3000,
      historyApiFallback: true,
      hot: true,
      proxy: {
        '/proxy_auth/*': {
          target: 'http://my.backend.domain',
          pathRewrite: { '^/proxy_auth': '' },
          changeOrigin: true,
          cookieDomainRewrite: 'localhost',
          withCredentials: true
        }
      }
    },

Только в таком случае все запросы вы должны кидать на /proxy_auth , а вебпак будет сам перенаправлять их на ваш бэк - my.backend.domain