Webpack项目中AJAX请求PHP文件出现404错误的解决求助

问题根源 #

核心问题是混淆了前端静态资源和后端PHP接口的处理逻辑：

• Webpack的静态资源复制只是把文件原样输出，Apache不会自动解析Webpack打包目录里的PHP文件（除非专门给该目录配置PHP解析规则）；
• 开发时Webpack Dev Server是独立服务，和Apache的PHP服务不在同一上下文，直接请求/scripts/addSetup.php会被Webpack Dev Server当作静态文件查找，自然找不到。

根本解决方案 #

1. 开发环境：配置Webpack Dev Server代理

把前端AJAX请求代理到Apache的PHP服务上，步骤如下：

• 假设你的Apache服务运行在http://localhost:80，Webpack Dev Server运行在http://localhost:8080；
• 在webpack.config.js中添加devServer代理配置：

module.exports = {
  // ...其他已有的Webpack配置
  devServer: {
    // 代理所有/scripts开头的请求到Apache
    proxy: {
      '/scripts': {
        target: 'http://localhost:80',
        changeOrigin: true, // 确保请求头的Host正确
        secure: false // 本地开发不需要HTTPS
      }
    }
  }
};

配置完成后重启Webpack Dev Server，前端的AJAX请求会被自动转发到Apache，由Apache解析PHP脚本。

2. 生产环境：规范目录结构

构建完成后，按以下结构部署到Apache根目录（比如Wamp的www文件夹）：

www/
├─ dist/          # Webpack打包后的前端文件（index.html、css、js等）
├─ scripts/       # PHP接口脚本（addSetup.php等）

这样前端页面请求/scripts/addSetup.php时，Apache能直接找到对应的PHP文件并解析。

3. 为什么php-loader没用？

php-loader的作用是把PHP文件当作模板编译成HTML字符串（比如嵌入静态数据），它不能让Webpack处理后端接口请求，所以这个方案从一开始就不适用。

4. 废弃临时.htaccess方案的原因

用.htaccess重写规则只是临时绕开了路径问题，但没有理顺Webpack和Apache的职责划分：

• 开发环境和生产环境路径逻辑不一致，容易出问题；
• 后续调整接口路径时，需要同步修改htaccess规则，维护成本高。

内容的提问来源于stack exchange，提问作者Thyronia