React中fetch返回200但无法读取响应数据问题求助

核心原因：mode: 'no-cors'的安全限制 #

你在fetch请求中设置的mode: 'no-cors'是导致无法读取响应的关键。这个模式是浏览器为满足无需读取响应内容的跨域场景（比如加载第三方图片、静态脚本）设计的，它会强制限制前端对响应的访问权限：

• 无论后端返回什么状态码或内容，前端都无法获取响应的status、body、headers等任何信息
• 这类请求的响应会被标记为不透明响应（opaque response），所以你尝试调用response.json()或读取响应属性时，会得到undefined并抛出错误

正确的解决方式 #

1. 移除mode: 'no-cors'配置
   fetch默认使用cors模式，这才是需要读取跨域响应时应该用的模式。

2. 在Symfony后端配置CORS支持
   跨域请求需要后端配合返回CORS相关响应头，才能让前端正常读取响应：

   • 可以使用Symfony的nelmio/cors-bundle快速配置
   • 配置允许你的前端域名（比如http://localhost:3000）、允许的请求方法（POST）、允许的请求头
   • 确保后端返回Access-Control-Allow-Origin等必要的CORS响应头

举个简单的Symfony CORS配置示例（config/packages/nelmio_cors.yaml）：

nelmio_cors:
    defaults:
        origin_regex: true
        allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
        allow_methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
        allow_headers: ['Content-Type', 'Authorization']
        expose_headers: ['Link']
        max_age: 3600
    paths:
        '^/move':
            allow_origin: ['http://localhost:3000']
            allow_methods: ['POST']

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