[英]CodeIgniter4 + Vue + Webpack devServer CORS
I am poking around with Vue & CodeIgniter 4 and am using as https://github.com/flavea/ci4-vue a jumping-off point.我正在使用 Vue & CodeIgniter 4 并使用https://github.com/flavea/ci4-vue作为起点。
No matter what I seem to try, I keep getting this pesky CORS error when in dev mode:无论我似乎尝试什么,在开发模式下我都会收到这个讨厌的 CORS 错误:
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. 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控制检查:请求的资源上不存在“Access-Control-Allow-Origin”header。
I've read quite a few threads and Mozilla's article on CORS ...I understand我已经阅读了很多线程和Mozilla 关于 CORS 的文章...我了解
What I don't understand where I need to resolve it...Apache, my PHP App, Vue, Webpack?我不明白我需要在哪里解决它...Apache,我的 PHP 应用程序,Vue,Webpack? (my suspicion is WebPack / Node). (我怀疑是 WebPack / 节点)。
My question...how do I resolve this CORS issue for my dev mode?我的问题...如何为我的开发模式解决此 CORS 问题?
Some additional background info:一些额外的背景信息:
npm run dev
...I have no issues when I run it in 'production'; ie npm run build
).我已经设置好了所有东西,但是当我在开发模式下运行站点时遇到了问题(即npm run dev
......当我在“生产”中运行它时没有问题;即npm run build
)。From what I gather, the dev build uses WebPack's devServer when in dev mode (see below)据我所知,开发版本在开发模式下使用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: ['.*'] } ]) ] })
In my .htaccess, I've added在我的 .htaccess 中,我添加了
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> <FilesMatch "\.(js)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch>
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.如果您想防止本地开发环境中出现 CORS 错误并从其他 web 服务器(远程或本地)访问数据,可以通过代理配置轻松完成。 This option redirect every request to a local path to a remote URL.此选项将每个请求重定向到远程 URL 的本地路径。 https://webpack.js.org/configuration/dev-server/#devserverproxy 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.在这种情况下,您甚至不需要 CORS 配置,因为您将在同一本地环境中安装外部路径,这样 web 浏览器就不会报错。 The remote address must of course be trustworthy.远程地址当然必须是可信的。
After trying a bunch of things, I had to add headers to my CodeIgniter Method:在尝试了一堆东西之后,我不得不在我的 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");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.