title: CodeIgniter4 + Vue + Webpack devServer CORS
body: <p>I am poking around with Vue &amp; CodeIgniter 4 and am using as <a href="https://github.com/flavea/ci4-vue" rel="nofollow noreferrer">https://github.com/flavea/ci4-vue</a> a jumping-off point.</p>
  
  <p>No matter what I seem to try, I keep getting this pesky CORS error when in dev mode:</p>
  
  <blockquote>
    <p>Access to XMLHttpRequest at '<a href="http://example.com/public/api/book/get" rel="nofollow noreferrer">http://example.com/public/api/book/get</a>'
    from origin '<a href="http://example.com:8080" rel="nofollow noreferrer">http://example.com:8080</a>' has been blocked by CORS
    policy: Response to preflight request doesn't pass access control
    check: No 'Access-Control-Allow-Origin' header is present on the
    requested resource.</p>
  </blockquote>
  
  <ul>
  <li>This is my CodeIgniter URL: <a href="http://example.com/public/api/book/get" rel="nofollow noreferrer">http://example.com/public/api/book/get</a></li>
  <li>This is my WebPack/Vue URL: <a href="http://example.com:8080" rel="nofollow noreferrer">http://example.com:8080</a></li>
  </ul>
  
  <p>I've read quite a few threads and <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" rel="nofollow noreferrer">Mozilla's article on CORS</a> ...I understand </p>
  
  <ol>
  <li>What CORS is,</li>
  <li>That the CORS issues is likely due to my PHP app running on port 80 and my Vue/Node/Webpack App Running on Port 8080 in dev mode.</li>
  </ol>
  
  <p>What I don't understand where I need to resolve it...Apache, my PHP App, Vue, Webpack? (my suspicion is WebPack / Node).</p>
  
  <p>My question ...how do I resolve this CORS issue for my dev mode? </p>
  
  <p>Some additional background info:</p>
  
  <ul>
  <li>I have everything set up, but am running into issues when I run the site in dev mode, (i.e. <code>npm run dev</code> ...I have no issues when I run it in 'production'; i.e. <code>npm run build</code>).</li>
  <li>The above reference codebase uses <a href="https://github.com/codeigniter4/CodeIgniter4" rel="nofollow noreferrer">CodeIgniter 4</a> for the API URLs; in other words, I am using CodeIgniter for RESTful URLs to do CRUD stuff on a MySQL / MariaDB database.</li>
  <li>I'm running my site on MAMP / macOS (Apache, port 80 )for my CodeIgniter app</li>
  <li><p>From what I gather, the dev build uses <a href="https://webpack.js.org/configuration/dev-server/#devserver" rel="nofollow noreferrer">WebPack's devServer</a> when in dev mode (see below)</p>
  
  <pre><code>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: ['.*']
          }
      ])
      ]
  })
  </code></pre></li>
  <li><p>In my .htaccess, I've added</p>
  
  <pre><code>&lt;IfModule mod_headers.c&gt;
      Header set Access-Control-Allow-Origin "*"
  &lt;/IfModule&gt;
  
  &lt;FilesMatch "\.(js)$"&gt;
      Header set Access-Control-Allow-Origin "*"
  &lt;/FilesMatch&gt;
  </code></pre></li>
  </ul>