React+Webpack+PHP+Apache项目：API置于public外的AJAX路径问题

首先咱们先明确下典型的项目结构，这样更容易理解配置逻辑：

your-project/
├── src/          # React的源码目录
├── public/       # React打包后的静态资源目录，同时是Apache的根目录
├── api/          # 你的PHP API文件目录（和src同级，在public上方）
│   └── example.php
└── webpack.config.js

第一步：调整Apache的重定向规则 #

因为你之前配置的是把所有请求都重定向到public目录，现在需要让Apache能识别API请求，把它转发到上层的api目录，而不是都指向React的index.html。

你可以在public目录下创建或修改.htaccess文件，添加以下规则：

# 优先处理API请求：如果请求路径以/api/开头，转发到上层的api目录
RewriteRule ^api/(.*)$ ../api/$1 [L]

# 处理React单页应用的路由：非文件/目录的请求都指向index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

这段规则的逻辑是：先检查请求是不是/api开头的，如果是，就把请求转发到项目根目录下的api文件夹；如果不是静态文件或目录，再交给React的单页路由处理。

第二步：开发环境的Webpack代理配置 #

开发时你应该是用Webpack Dev Server跑React的，这时候Dev Server和Apache是两个不同的服务（比如Dev Server在localhost:8080，Apache在localhost:80），所以需要配置代理，让Dev Server把/api开头的请求转发到Apache的PHP服务上。

在webpack.config.js里添加devServer的代理配置：

module.exports = {
  // ...其他Webpack配置项
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost', // 这里填你的Apache服务器地址
        changeOrigin: true,
        pathRewrite: { '^/api': '/api' } // 保持请求路径不变
      }
    }
  }
};

第三步：在React中使用相对路径请求API #

做完上面两步后，不管是开发环境还是生产环境，你都可以直接用/api/xxx这样的相对路径来发起AJAX请求了。举个例子：

用fetch的例子 #

fetch('/api/example.php')
  .then(res => res.json())
  .then(data => {
    console.log('API返回的数据:', data);
  })
  .catch(err => {
    console.error('请求出错:', err);
  });

用axios的例子 #

import axios from 'axios';

axios.get('/api/example.php')
  .then(res => {
    console.log('API返回的数据:', res.data);
  })
  .catch(err => {
    console.error('请求出错:', err);
  });

这样配置后，生产环境中Apache会自动把/api/example.php的请求转发到项目根目录下的api/example.php文件；开发环境中Webpack Dev Server会把这个请求代理到Apache的PHP服务上，完美实现同项目下的API请求，不用分开部署。

内容的提问来源于stack exchange，提问作者i.brod