Vite+React请求PHP文件返回源码而非预期内容的问题

你的问题本质是React开发服务器和PHP服务器各司其职，不能直接互相访问对方的未编译文件：

• React的npm run dev用的是静态/JS编译服务器（比如Vite、Webpack Dev Server），它只会处理JS/JSX/CSS等前端文件，遇到PHP只会当成普通文本返回源码，根本不会解析执行。
• WAMP的Apache是PHP专用服务器，能解析PHP，但它不懂JSX语法，所以直接访问React文件会返回源码。

具体解决步骤： #

1. 把PHP文件移到WAMP的根目录
   找到WAMP的www文件夹（一般在C:\wamp64\www），新建一个api子文件夹，把你的users.php放进去。现在通过WAMP访问http://localhost/api/users.php应该能正常返回Hello World。

2. 修改React里的请求地址
   把Landing.jsx里的url改成WAMP的完整地址，比如：

   const url = "http://localhost/api/users.php";
   

   或者后面配置代理后用相对路径，避免跨域。

3. 处理跨域问题
   因为React开发服务器默认在3000端口，WAMP在80端口，浏览器会阻止跨域请求，得配代理：

   • 如果用Vite：在vite.config.js里加代理配置：

     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     
     export default defineConfig({
       plugins: [react()],
       server: {
         proxy: {
           '/api': {
             target: 'http://localhost',
             changeOrigin: true
           }
         }
       }
     });
     

     之后React里可以用const url = "/api/users.php";，请求会被自动转发到WAMP。
   • 如果用Create React App：在package.json里加一行"proxy": "http://localhost"，然后同样用/api/users.php作为请求地址。

4. 同时启动两个服务
   先打开WAMP确保Apache运行，然后在React项目里执行npm run dev，这样React能正常编译JSX，请求PHP时也能通过WAMP解析返回正确结果。

额外注意 #

• 不要把PHP文件放在React项目的src或其他前端目录里，React开发服务器不会帮你解析它。
• 测试时先单独访问PHP地址确认能返回Hello World，再在React里调试fetch请求。

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