Установите заголовки CORS для быстрого обновления в CRA

Question

      {
  "react": "^17.0.1",
  "react-scripts": "4.0.3"
}

Мое приложение React загружается по всему домену, находящемуся в разработке, и я настроил свое приложение React, чтобы также загружать блоки пакетов по всему домену, используя __webpack_public_path__.

Например:

Страница на https://test.local -> встраивает https://host.docker.internal:3002/static/js/bundle.js -> грузы https://host.docker.internal:3002/static/js/0.chunk.js.

Проблема заключается во время горячей загрузки, обновленный JSON также загружается из междоменного домена, что приводит к ошибке CORS:

Поскольку CRA не разрешает доступ к конфигурации для webpack-dev-server, я не могу придумать способ обойти это, кроме отключения быстрого обновления через FAST_REFRESH=false переменная env.

У кого-нибудь есть идея или решение получше?

Answer 1

Я проверил вашу проблему CORS, и она всегда возникает, когда разработчики работают в другом домене.

Есть много способов обойти проблему CORS, но я расскажу вам, как бороться с CORS в приложении React.

Ручное проксирование Если нам нужен больший контроль над тем, как выполняются эти междоменные запросы, у нас есть другой вариант - создать файл, который выглядит следующим образом:

      const proxy = require("http-proxy-middleware");

module.exports = app => {
  app.use(
    "/api",
    proxy({
      target: "http://localhost:4000",  // target server address and port
      changeOrigin: true
    })
  );
};

Но мы можем пойти дальше и использовать такие параметры, как pathRewrite, чтобы изменить путь запроса:

      

const proxy = require("http-proxy-middleware");

module.exports = app => {
  app.use(
    "/api",
    proxy({
      target: "http://localhost:4000",
      changeOrigin: true,
      pathRewrite: {
        "^/api": "/api/v1"
      }
    })
  );
};

Если вашему веб-приложению необходимо запрашивать данные из другого домена, и вы хотите, чтобы ваша среда разработки имитировала производственную конфигурацию, в которой интерфейс и серверная часть обслуживаются из одного домена, обязательно взгляните на прокси-сервер и опции Create React App. Они значительно упростят разработку вашего приложения!

Надеюсь, мой опыт поможет вам и другим.