MERN项目本地API浏览器调用失败但Postman测试正常的问题求助

1. 修复前端fetch请求的语法错误 #

你的前端代码里，body被错误嵌套在headers对象内部，这会导致请求格式失效。正确写法需将body作为fetch配置的顶级属性：

const handlesubmit = async (e) => {
    e.preventDefault();
    if (form.prompt && form.photo) {
      setLoading(true);
      try {
        const response = await fetch("http://localhost:8080/api/v1/post", {
          method: "POST",
          headers: {
            "Content-Type": "application/json" // 仅保留请求头配置
          },
          body: JSON.stringify(form) // body独立作为配置项
        });
        const data = await response.json(); // 建议接收返回数据，便于排查问题
        if (!response.ok) {
          throw new Error(data.message || '请求失败');
        }
        console.log("Hello");
        navigate("/");
      } catch (error) {
        alert(error.message);
      } finally {
        setLoading(false);
      }
    }
  };

2. 配置后端CORS支持 #

浏览器的同源策略会拦截跨端口/域名的请求，Postman不受此限制，需在Express后端添加CORS配置：

步骤1：安装cors依赖 #

在后端项目根目录执行：

npm install cors

步骤2：在Express主文件中启用CORS #

找到你的Express入口文件（通常是server.js或app.js），导入并配置cors中间件：

import express from 'express';
import cors from 'cors';
import postRouter from './path/to/your/post/router.js'; // 替换为你的路由文件实际路径

const app = express();

// 允许前端所在源的请求（示例为localhost:3000，替换为你的前端实际端口）
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true // 如需携带Cookie等凭证，开启此项
}));

// 解析JSON请求体（需放在路由挂载前）
app.use(express.json({ limit: '50mb' })); // 图片上传需放宽请求体大小限制

// 挂载路由
app.use('/api/v1/post', postRouter);

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

开发环境快捷配置（不推荐生产使用） #

如果开发阶段不想限制源，可直接全局启用CORS：

app.use(cors());

生产环境务必指定具体前端域名，避免安全风险。

3. 验证修复 #

重启后端服务器，重新运行前端项目，此时跨域请求应能正常触发。若仍有问题，可打开浏览器控制台的「网络」标签，查看请求的详细错误信息进一步排查。

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