CodeIgniter4 + Vue + Webpack devServer CORS

Question

Я слоняюсь с Vue и CodeIgniter 4 и использую как https://github.com/flavea/ci4-vue точку отсчета.

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

Доступ к XMLHttpRequest в 'http://example.com/public/api/book/get' из источника 'http://example.com: 8080 ' был заблокирован политикой CORS: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: на запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

• Это мой CodeIgniter URL: http://example.com/public/api/book/get
• Это мой WebPack / Vue URL: http://example.com: 8080

I ' Я прочитал немало тем и статьи Mozilla о CORS ... Я понимаю

1. Что такое CORS,
2. То, что проблемы с CORS, вероятно, связаны с моими PHP приложение, работающее на порту 80, и мое приложение Vue / Node / Webpack, работающее на порте 8080 в режиме разработки.

Что я не понимаю, где мне нужно разрешить его ... Apache мой * 10 73 * приложение, Vue, Webpack? (мое подозрение - WebPack / Node).

Мой вопрос ... как мне решить эту проблему CORS для моего режима разработки?

Некоторая дополнительная справочная информация:

• У меня все настроено, но у меня возникают проблемы, когда я запускаю сайт в режиме разработки (т.е. npm run dev ... У меня есть нет проблем, когда я запускаю его в производственном режиме, т.е. npm run build).
• Приведенная выше справочная кодовая база использует CodeIgniter 4 для URL-адресов API; другими словами, я использую CodeIgniter для RESTful URL-адресов, чтобы выполнять CRUD-операции с базой данных MySQL / MariaDB.
• Я использую свой сайт на MAMP / macOS (Apache, порт 80) для моего Приложение CodeIgniter

• Исходя из того, что я понял, сборка dev использует devServer WebPack в режиме разработки (см. Ниже)

  const devWebpackConfig = merge(baseWebpackConfig, {
      module: {
      rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
      },
      // cheap-module-eval-source-map is faster for development
      devtool: config.dev.devtool,
  
      // these devServer options should be customized in /config/index.js
      devServer: {
      clientLogLevel: 'warning',
      historyApiFallback: {
          rewrites: [
          { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
          ],
      },
      // I added the following, seems to do nothing.
      headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
          "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
      },
      hot: true,
      contentBase: false, // since we use CopyWebpackPlugin.
      compress: true,
      host: HOST || config.dev.host,
      port: PORT || config.dev.port,
      open: config.dev.autoOpenBrowser,
      overlay: config.dev.errorOverlay
          ? { warnings: false, errors: true }
          : false,
      //publicPath: config.dev.assetsPublicPath,
      //proxy: config.dev.proxyTable,
      quiet: true, // necessary for FriendlyErrorsPlugin
      watchOptions: {
          poll: config.dev.poll,
      }
      },
      plugins: [
      new webpack.DefinePlugin({
          'process.env': require('../config/dev.env')
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
      new webpack.NoEmitOnErrorsPlugin(),
      // https://github.com/ampedandwired/html-webpack-plugin
      new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true
      }),
      // copy custom static assets
      new CopyWebpackPlugin([
          {
          from: path.resolve(__dirname, '../static'),
          to: config.dev.assetsSubDirectory,
          ignore: ['.*']
          }
      ])
      ]
  })
  

• В моем .htaccess я добавил

  <IfModule mod_headers.c>
      Header set Access-Control-Allow-Origin "*"
  </IfModule>
  
  <FilesMatch "\.(js)$">
      Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
  

Answer 1

Попробовав кучу вещей, мне пришлось добавить заголовки в метод CodeIgniter:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding");

Answer 2

Если вы хотите предотвратить ошибки CORS в локальной среде разработчика и получить доступ к данным с других веб-серверов (удаленных или локальных), это можно легко сделать с помощью конфигурации прокси. Эта опция перенаправляет каждый запрос на локальный путь к удаленному URL. https://webpack.js.org/configuration/dev-server/#devserverproxy

В этом случае вам даже не понадобится конфигурация CORS, поскольку вы подключите внешний путь в той же локальной среде, чтобы веб-браузер не жаловался , Конечно, удаленный адрес должен быть надежным.