后端Fetch请求异常：Redux+MySQL环境下代理配置问题排查

嘿，我来帮你排查下这个问题，看起来核心问题出在代理配置未生效加上请求代码的逻辑错误，咱们一步步来解决：

1. 代理完全没起作用——因为你用了绝对路径请求 #

你的package.json里配置了proxy: "http://myIPaddress:4001"，但Redux action里却用了带IP的绝对路径发起请求：

const baseline = `http://myIPaddress/`
let res = await fetch(`${baseline}${path}${params}`)

Create React App的代理机制只对相对路径请求生效（比如/postLogin/xxx/xxx）。当你用绝对路径时，浏览器会直接请求那个IP地址，完全绕过了代理配置——这就会导致要么跨域被浏览器拦截，要么请求端口不匹配（你的后端在4001端口，但你请求的地址没带端口）。

修复方法： #

把请求改成相对路径，删掉硬编码的IP：

export const login = (username, password) => async dispatch => {
  console.log('用户名:', username.value, " 密码:", password.value)
  const path = `postLogin/`
  const params = `${username.value}/${password.value}`
  console.log('请求路径:', `/${path}${params}`)
  
  try{
    const res = await fetch(`/${path}${params}`, { method: 'GET' })
    // 后续逻辑往下看
  } catch(e){
    console.log(`登录失败：${e.message}`)
  }
}

这样请求会先发送到前端服务的地址（比如localhost:3000），再通过代理转发到http://myIPaddress:4001。

2. Fetch请求的Promise处理逻辑错误 #

你的代码同时混用了async/await和.then，还重复调用了res.json()——这会直接导致报错：

let res = await fetch(...)
.then(res => res.json())
.then( dispatch( { type: LOGIN, payload: res.json() }) )

• res.json()是异步操作，而且响应体只能被消费一次，第二次调用会直接失败
• 第二个.then里你直接执行了dispatch，而不是传递一个函数，这会导致dispatch在请求还没完成时就触发了

修复方法： #

统一用async/await处理，代码更清晰靠谱：

try{
  const res = await fetch(`/${path}${params}`, { method: 'GET' })
  
  // 先检查响应状态是否正常
  if (!res.ok) {
    throw new Error(`请求失败：${res.status} ${res.statusText}`)
  }
  
  const data = await res.json() // 只调用一次res.json()
  dispatch({ type: LOGIN, payload: data })
} catch(e){
  console.log(`登录失败：${e.message}`)
}

3. 代理配置的secure: false位置不对 #

你的package.json里把"secure": false和proxy平级放置了，但这个配置在CRA的默认代理里不生效。如果你的后端用了自签名HTTPS证书，需要用自定义代理配置：

修复方法： #

1. 先安装依赖：

npm install --save-dev http-proxy-middleware

2. 在src目录下创建setupProxy.js文件：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/', // 匹配所有请求路径
    createProxyMiddleware({
      target: 'http://myIPaddress:4001',
      changeOrigin: true,
      secure: false, // 这里设置忽略证书验证
    })
  );
};

3. 删掉package.json里的proxy和secure配置，重启前端服务。

4. 多余的Content-Type请求头 #

GET请求通常不需要设置Content-Type（因为GET没有请求体），如果后端对请求头有严格校验，这个多余的配置可能会导致请求被拒绝。直接删掉headers配置即可。

最后验证步骤 #

1. 重启前后端服务（用concurrently）
2. 打开浏览器控制台的Network面板，检查请求地址是否是前端服务的地址（比如http://localhost:3000/postLogin/xxx/xxx），而不是直接请求myIPaddress
3. 查看请求的响应状态和内容，确认是否成功

如果还有问题，可以补充以下信息：

• 浏览器控制台的具体错误信息（比如跨域错误、404/500状态码）
• 后端服务的日志，看是否接收到了前端的请求
• 前端服务的启动端口（默认是3000）

内容的提问来源于stack exchange，提问作者N. Kendrick