CodeIgniter4+Vue+Webpack devServer CORS

Question

我正在研究Vue&CodeIgniter4，并使用https://github.com/flavea/ci4-vue作为一个起点。

不管我尝试了什么，在开发模式下，我总是得到这个讨厌的CORS错误：

CORS策略阻止从来源“http://example.com/public/api/book/get”访问“http://example.com:8080”的XMLHttpRequest：对飞行前请求的响应未通过访问控制检查：请求的资源上没有“access-control-allog-origin”标头。

• 这是我的CodeIgniter URL:http://example.com/public/api/book/get
• 这是我的WebPack/Vue URL:http://example.com:8080

1. 什么是CORS,
2. CORS问题可能是由于我的PHP应用程序在端口80上运行，而我的VUE/Node/WebPack应用程序在端口8080上以开发模式运行。

我不明白我需要在哪里解决它...Apache,我的PHP应用程序，Vue,WebPack？（我怀疑是WebPack/Node）。

我的问题...我如何解决这个CORS问题为我的开发模式？

一些附加的背景信息：

>

我已经设置好了所有内容，但在以开发模式运行站点时遇到了问题（即npm运行dev...在“生产”中运行站点时没有问题；即npm运行build)。

上述参考代码库使用CodeIgniter4作为API URL；换句话说，我使用CodeIgniter for RESTful URL在MySQL/MariaDB数据库上执行一些错误的操作。

我正在MAMP/macOS（Apache,端口80）上为我的CodeIgniter应用程序运行我的站点

据我所知，在开发模式下，dev构建使用WebPack的devServer（见下文）

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

如果您希望防止本地开发环境中的CORS错误，并从其他web服务器（远程或本地）访问数据，可以通过代理配置非常容易地完成。此选项将每个请求重定向到远程URL的本地路径。https://webpack.js.org/configuration/dev-server/#devserverproxy

在这种情况下，您甚至不需要CORS配置，因为您将在相同的本地环境中挂载外部路径，这样web浏览器就不会抱怨。远程地址当然必须是可信的。