Создать приложение React, добавив CORS-заголовок

Question

Я пытаюсь выяснить, где добавить заголовок "Access-Control-Allow-Origin" в мою конфигурацию сервера для создания-реакции-приложения.

Пока я добавляю это config/webpackDevServer.config.js без особой удачи.

Любая идея о том, где я мог бы добавить это?

Спасибо!

Answer 1

Вот рецепт, основанный на ответе @tlfu для тех, кто использует react-app-rewired. В этом случае вам нужно определить корневой уровеньconfig-overrides.js файл, содержащий следующее:

module.exports = {
  // Extend/override the dev server configuration used by CRA
  // See: https://github.com/timarney/react-app-rewired#extended-configuration-options
  devServer: function(configFunction) {
    return function(proxy, allowedHost) {
      // Create the default config by calling configFunction with the proxy/allowedHost parameters
      // Default config: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpackDevServer.config.js
      const config = configFunction(proxy, allowedHost);

      // Set loose allow origin header to prevent CORS issues
      config.headers = {'Access-Control-Allow-Origin': '*'}

      return config;
    };
  },
};

Answer 2

Я ударил эту проблему. В моем случае я делаю что-то немного необычное. Я обслуживаю свое приложение React со страницы Salesforce Visualforce, поэтому страница обслуживается из домена visual.force.com. Я подключил страницу Visualforce, чтобы можно было запускать приложение локально, используя Dev-сервер Webpack и туннель (ngrok) для передачи запросов от Salesforce на localhost. Когда мое приложение пытается загрузить ресурсы из "общедоступной" папки приложения, я получаю такие ошибки:

Не удалось загрузить https://xxxx.ngrok.io/scss/bootstrap.scss: в запрошенном ресурсе отсутствует заголовок "Access-Control-Allow-Origin". Поэтому происхождение "https://xxxx.visual.force.com" не разрешено.

Я пытался добавить devServer: {headers: {'Access-Control-Allow-Origin': '*'}} к объекту конфигурации webpack.config.dev.js, но это не сработало. Я обнаружил, что вместо этого мне нужно было добавить следующее в файл webpackDevServer.config.js: headers: {'Access-Control-Allow-Origin': '*'} (обратите внимание, что "заголовки" - это свойство конфигурации верхнего уровня, не вложенное в свойство "devServer"). Я читал, где, когда вы запускаете Webpack Dev Server через Node API, он не читает объект конфигурации devServer из вашего файла конфигурации webpack.

Answer 3

Извините, если у меня неправильный конец флешки, но из вашего вопроса я предполагаю, что вы используете API бэкэнда с интерфейсом реакции. afaik вам не нужны Cors, просто добавьте прокси в ваш клиент / внешний пакет package.json: "proxy": "http://localhost:5000/" Дэн говорит, что это только для простых случаев, но я надеюсь, что это поможет