Как настроить заголовки ответа в приложении Ejected React Create? - PullRequest
Новая
       27

Как настроить заголовки ответа в приложении Ejected React Create?

0 голосов
/ 30 октября 2018

Я пытаюсь внедрить поток OAuth2 в мой проект. У меня есть приложение для панели мониторинга, созданное с помощью React-Create-App, и у меня есть другое приложение для процессов входа в систему, которое также создается с помощью React-Create-App. Кроме того, у меня есть бэкэнд-загрузчик, который обрабатывает части сервера авторизации и ресурсов.

Так что у меня одновременно работают 3 разных приложения, которые я назову их

Поток приложений

  1. Когда пользователь заходит в Личный кабинет, если он не вошел в систему, я перенаправляю в приложение входа в систему
  2. Пользователь вводит свой адрес электронной почты и пароль
  3. Вход в приложение отправляет запрос на сервер (2884) с перенаправлением Uri Dashboard
  4. Сервер перенаправляет на панель управления

Задача Когда сервер отправляет страницу запроса на перенаправление, она не перезагружается, но возвращает мне страницу индекса, и даже если я вижу запрос Option в веб-пакете Dashboard, я не вижу запрос get и не могу обойти его в прокси.

Вход в приложение 

getAuthorizationCode(userName, password) {
const headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
};

return axios({
  url: 'http://localhost:2884/oauth/authorize',
  method: 'get',
  params: {
    scope: 'read',
    audience: 'tokyo',
    response_type: 'code',
    client_id: 'test_tokyo',
    redirect_uri: 'http://localhost:3000',
  },
  headers,
  auth: {
    username: userName,
    password: password,
  },
}).then((res) => {
  console.log('response', res); // I can see the index html at the console but page is not reloading
});

Веб-пакет панели инструментовDevServerConfig 

module.exports = function(proxy, allowedHost) {
  return {
disableHostCheck:
  !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',

compress: true,
clientLogLevel: 'none',
contentBase: paths.appPublic,
watchContentBase: true,
hot: true,
headers: {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Credentials': 'true',
  'Access-Control-Max-Age': '3600',
  'Access-Control-Allow-Headers': 'authorization',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
},
proxy: {
  '/*': {
    target: {
      host: 'localhost',
      protocol: 'http',
      port: 3000,
    },
    secure: false,
    bypass(req, res) {
      console.info("Method = ", req.method);
      console.info("originalUrl = ", req.originalUrl);
      if (req.method === 'GET') {
        console.info("2");
        res.statusCode = 302;
        return 'a';
      }
      if (req.method === 'OPTIONS') {
        console.info("1");
        res.statusCode = 200;
        return 'a'; // I don't know the purpose of this line, but indeed it works
      }
    },
  },
},
publicPath: config.output.publicPath,
quiet: true,
watchOptions: {
  ignored: ignoredFiles(paths.appSrc),
},
https: protocol === 'https',
host: host,
overlay: false,
historyApiFallback: {
  disableDotRule: true,
},
public: allowedHost,
before(app) {
  app.use(errorOverlayMiddleware());
  app.use(noopServiceWorkerMiddleware());
},

Сетевой поток

1. Запрос предварительной проверки с логина на сервер

2. Первоначальный запрос на получение сервера

3. Запрос параметров предварительной проверки к веб-пакету панели инструментов

4. Первоначальный запрос на получение доступа к панели инструментов

Я не думаю, что браузер отправляет последний запрос, потому что я не вижу его на консоли Dashboard, но могу видеть третий

...