React+Express全栈博客API请求404求助（Postman测试正常）

核心问题分析 #

• 端口冲突：前端Vite默认占用5173端口，后端也使用该端口，导致两个服务无法同时正常运行
• CORS配置错误：origin值设置为具体路径而非前端域名，导致跨域验证失败
• 请求地址错误：React请求仍指向前端端口，而非后端实际运行端口

分步修复 #

1. 修改后端端口 #

打开server.js，将端口改为与前端不同的数值（比如3000）：

// start server
const port = 3000 // 替换原来的5173

2. 修正CORS配置 #

同样在server.js中，修改cors的origin为前端域名：

app.use(cors({
    origin: "http://localhost:5173" // 去掉末尾的/posts
}));
// 开发阶段也可以用origin: "*" 简化配置

3. 更新React请求地址 #

在Add_Post组件中，将axios请求地址改为后端新端口：

const response = await axios.post('http://localhost:3000/posts', {
    title : title,
    content : content,
    author : author
})

（可选）使用Vite代理配置（更优雅的方案） #

在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:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

然后修改React中的请求地址：

const response = await axios.post('/api/posts', {
    title : title,
    content : content,
    author : author
})

验证步骤 #

1. 重启后端服务，确认控制台显示Server running on port 3000
2. 重启前端Vite服务
3. 提交表单测试，此时请求应正常发送到后端并返回201状态码

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