Ошибка CORS по запросу с настроенными заголовками и прокси-сервером webpack-dev-server - PullRequest
Новая
       30

Ошибка CORS по запросу с настроенными заголовками и прокси-сервером webpack-dev-server

0 голосов
/ 17 мая 2019

У меня есть простое приложение ReactJS + Typescript (в комплекте с Webpack), которое я разрабатывал последние пару дней.Теперь я запускал часть соединения с бэкэндом (не моя область, не моя ответственность в этом контексте), с которой у меня возникли некоторые трудности.Основная проблема - это ошибка CORS в браузере.Это мои настройки: 

    "webpack": "^4.30.0",
    "webpack-dev-server": "^3.3.1",
    "typescript": "^3.4.5",
    "react": "^16.8.6",
    "axios": "^0.18.0",
    Chrome version 74.0.3729.131 (64-bit)

Без каких-либо предложений или экспериментов, я столкнулся с этой ошибкой: enter image description here

Я пробовал парувещей, чтобы решить эту проблему, но никто из них на самом деле не исправилОни таковы:

  1. В моем файле конфигурации webpack.dev.ts я настроил свойство прокси-сервера webpack.Я настроил это так: 
  devServer: {
    contentBase: path.join(__dirname, process.env.PUBLIC_PATH || '../dist'),
    compress: true,
    host: process.env.DEV_HOST || 'localhost',
    port: process.env.DEV_PORT || 8000,
    open: 'chrome',
    proxy: {
      '/api': {
        target: 'http://<ip>:8888',
        secure: false,
      },
    },
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Methods': '*',
    },
  },

Запрос к бэкэнду построен следующим образом: 

const config = {
  method: 'post',
  url: '/api/login',
  data: { password: password },
};
axios(config)
  .then(resp => console.log(resp))
  .catch(error => console.log(error));

Обратите внимание, что на данный момент поле passwordтолько заполнитель и не проверен на бэкэнде, и поэтому заголовок Access-Control-Allow-Credentials не требуется.

К моему большому разочарованию, запрос, кажется, не использует настроенный прокси, так как это ошибка: enter image description here

На вкладке сети,также нет ссылки на внутренний IP-адрес.Обратите внимание, что только в этом случае запрос будет отображаться как POST , а не как запрос OPTIONS .

Попробовал настроить axios с заголовками, необходимыми для управления CORS на моей стороне (клиент).Это также не принесло никакого решения.Вот что я придумал: 
const config = {
  method: 'post',
  url: 'http://<ip>:8888/api/login',
  data: { password: password },
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': '*',
    'Access-Control-Allow-Methods': '*',
  },
};
axios(config)
  .then(resp => console.log(resp))
  .catch(error => console.log(error));

Полученный результат похож на тот, без какой-либо конфигурации (первое изображение прилагается здесь).

Наконец, я установил расширение Chrome для CORS, которое (я полагаю) прикрепляет заголовок Access-Control-Allow-Origin: * ко всем запросам.Здесь вещи становятся интересными / странными.Если это расширение активно (и не настраивать его), даже если я отключу все предыдущие параметры, ошибка изменится:

enter image description here

IЯ также пытался активировать все три предыдущих варианта одновременно, и появляется эта последняя ошибка.

Я не уверен, куда идти дальше или как действовать дальше.Я избегаю запроса на изменение заголовков API сервера, но я оставляю эту опцию открытой в качестве крайней меры.

Я пытался быть внимательным с объяснениями и с тем, чего я хочу достичь,но не стесняйтесь просить больше информации.

Заранее спасибо.

1 Ответ

0 голосов
/ 20 мая 2019

После всего этого у меня не было другого выбора, кроме как обновить серверную часть парой заголовков при получении предварительного запроса ( OPTIONS ):

  • Access-Control-Allow-Headers, который содержит все, что запрос имеет в том же заголовке;
  • Access-Control-Allow-Origin, для которого установлено значение *. Поскольку в производственной среде и внешний интерфейс, и внутренний будут локальными, это будет использоваться только для нашей среды разработки;
  • Access-Control-Allow-Methods, для удобства установлено *. Мы могли указать, какие методы будут разрешены в наших разрешенных доменах, но мы думали, что это не нужно для разработки env.

После установки этих флагов я оставил настройку прокси в Webpack следующим образом: 

    proxy: {
      '/api': {
        target: 'http://<ip>:8888',
        secure: false,
      },
    },
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Methods': '*',
    },

При повторном тестировании наших запросов все прошло гладко. Мы не нашли способа сделать это исключительно на стороне клиента.

Спасибо всем за комментарии.

...