浏览器创建用户报500错误，Postman正常，代理异常求助

问题描述 #

• Postman调用POST http://localhost:3000/createUser可正常创建用户
• 浏览器中执行同一请求时返回500内部服务器错误
• 前端控制台报错：Login.js第31行fetch请求异常，第44行JSON解析失败，响应提示Proxy error: Could not proxy request /createUser from localhost:3000 to http://localhost:1299/ (HPE_CR_EXPECTED)
• 后端服务器日志同样出现该代理错误

相关代码：

function register() {
    setMessage('');
    const userDto = {
        userName: userName,
        password: password,
   };
31  console.log(userDto);
    const options = {
        method: 'POST',
        body: JSON.stringify(userDto)
    };
    fetch('/createUser', options)
        .then((res) => res.json())
        .then((apiRes) => {
            console.log(apiRes);
            if (apiRes.status) {
                setUserName('');
                setPassword('');
                setMessage('Your account has been created!');
            } else {
                setMessage(apiRes.message);
            }
        })
        .catch((error) => {
44          console.log(error);
            setMessage('User was not created, SERVER ERROR');
        });
}

已尝试方案 #

• 修改package.json中的proxy配置
• 添加'Content-Type': 'application/json'请求头
• 校验JSON格式
• 清理浏览器缓存
• 检查后端服务器代码

可能的解决方向 #

HPE_CR_EXPECTED是HTTP解析错误，意味着代理服务器在处理后端响应时遭遇了格式不规范的内容，以下是针对性排查步骤：

1. 检查后端响应的纯净度 #

• 用Postman调用接口时，查看响应Headers和Body是否完全符合HTTP规范：确认Content-Length与实际响应体长度匹配，响应Body是合法JSON，无多余空格、换行或调试日志输出。
• 浏览器打开Network面板，查看500请求的原始响应内容，确认后端是否返回了畸形数据（比如未闭合的JSON、乱码字符）。

2. 替换代理配置方式 #

如果使用的是Create React App默认的package.json proxy，尝试改用http-proxy-middleware手动配置，增加更多兼容选项：

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/createUser',
    createProxyMiddleware({
      target: 'http://localhost:1299',
      changeOrigin: true,
      secure: false,
      onProxyRes: function(proxyRes, req, res) {
        // 移除可能导致解析异常的响应头
        delete proxyRes.headers['connection'];
      }
    })
  );
};

3. 确认后端服务的响应编码 #

• 后端返回响应时，必须明确设置Content-Type: application/json; charset=utf-8，避免出现字符编码冲突导致的解析错误。
• 检查后端代码中是否有额外的console.log或调试输出写入了响应流，这类内容会破坏响应体的纯净性。

4. 验证浏览器请求的完整性 #

• 在浏览器Network面板对比Postman的请求参数：确认Content-Type头已正确设置，请求Body是完整的JSON字符串，没有被浏览器自动修改编码。
• 确保fetch请求的headers配置正确：

  const options = {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json',
      },
      body: JSON.stringify(userDto)
  };
  

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