CodeIgniter4 + Vue + Webpack devServer CORS

Question

I am poking around with Vue & CodeIgniter 4 and am using as https://github.com/flavea/ci4-vue a jumping-off point.

No matter what I seem to try, I keep getting this pesky CORS error when in dev mode:

Access to XMLHttpRequest at ' http://example.com/public/api/book/get ' from origin ' http://example.com:8080 ' 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.

• This is my CodeIgniter URL: http://example.com/public/api/book/get
• This is my WebPack/Vue URL: http://example.com:8080

I've read quite a few threads and Mozilla's article on CORS ...I understand

1. What CORS is,
2. 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.

What I don't understand where I need to resolve it...Apache, my PHP App, Vue, Webpack? (my suspicion is WebPack / Node).

My question...how do I resolve this CORS issue for my dev mode?

Some additional background info:

• I have everything set up, but am running into issues when I run the site in dev mode, (ie npm run dev ...I have no issues when I run it in 'production'; ie npm run build ).
• The above reference codebase uses CodeIgniter 4 for the API URLs; in other words, I am using CodeIgniter for RESTful URLs to do CRUD stuff on a MySQL / MariaDB database.
• I'm running my site on MAMP / macOS (Apache, port 80 )for my CodeIgniter app

• From what I gather, the dev build uses WebPack's devServer when in dev mode (see below)

   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: ['.*'] } ]) ] })

• In my .htaccess, I've added

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

Answer 1

If you want to prevent CORS errors in your local dev environment and access data from other web servers (remote or local), it can be very easily done with the proxy config. This option redirect every request to a local path to a remote URL. https://webpack.js.org/configuration/dev-server/#devserverproxy

You don't even need a CORS configuration in this case, because you'll mount an external path on the same local environment, so that the web browser does not complain. The remote address must of course be trustworthy.

Answer 2

After trying a bunch of things, I had to add headers to my CodeIgniter Method:

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");