React中如何通过fetch获取404状态码

问题原因 #

你遇到的情况是因为目标服务器仅在返回200状态码时配置了CORS响应头（比如Access-Control-Allow-Origin），但返回404时没有添加这些头。浏览器的同源策略会拦截没有正确CORS头的跨域响应，哪怕状态码是404，也会直接抛出CORS错误，让你无法读取状态码。

解决办法 #

• 修改目标服务器的CORS配置
  让服务器在所有响应状态码（包括404、500等错误状态）下都返回必要的CORS头。比如：

  • 若用Nginx配置，确保add_header指令加上always参数，覆盖所有状态：

    location / {
      add_header Access-Control-Allow-Origin $http_origin always;
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
      add_header Access-Control-Allow-Headers 'Content-Type' always;
    }
    

  • 若用后端代码（比如Express），使用CORS中间件时确保它处理所有响应：

    const cors = require('cors');
    app.use(cors()); // 该中间件会自动为所有响应添加CORS头
    

• 使用代理服务器转发请求
  如果无法修改目标服务器的配置，自己搭建一个代理服务器，让前端请求代理，再由代理去请求目标URL，最后把状态码返回给前端。示例Node.js代理代码：

  const express = require('express');
  const fetch = require('node-fetch');
  const app = express();
  
  app.get('/proxy-check', async (req, res) => {
    const targetUrl = req.query.target;
    try {
      const response = await fetch(targetUrl);
      res.status(response.status).json({ status: response.status });
    } catch (err) {
      res.status(500).json({ error: '请求目标地址失败' });
    }
  });
  
  app.listen(3001, () => console.log('代理服务运行在3001端口'));
  

  前端请求示例：

  fetch('http://localhost:3001/proxy-check?target=https://你的目标URL')
    .then(res => res.json())
    .then(data => console.log(data.status, 'STATUS'));
  

• 调整资源部署策略
  如果目标资源是你自己的服务，尽量将其部署在与前端同域名/子域名下，或者配置统一的CORS规则，从根源避免跨域问题。

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