如何在React组件中展示Network面板返回的重复用户提示信息？

你的问题核心出在mode: "no-cors"这个配置上——加上它之后，浏览器会完全限制JavaScript访问响应内容：哪怕Network面板能看到服务器返回的提示，你的代码也拿不到任何有效数据，此时调用json()必然报错，因为这种模式下的响应是"opaque"（不透明）类型，不支持解析操作。

另外要注意，Access-Control-Allow-Origin是服务器端的响应头，不是请求头，你写在fetch的headers里完全没用，反而可能导致请求异常。

修复步骤： #

1. 移除mode: "no-cors"配置
   fetch默认是cors模式，这是跨域请求的正确模式，只要后端配置了CORS，就能正常获取响应。

2. 确保后端配置正确的CORS响应头
   让后端在响应里添加：

   Access-Control-Allow-Origin: 你的前端域名（比如http://localhost:3000）
   

   测试环境可暂时设为*，但生产环境不建议这么做。

3. 修改fetch代码，正确处理响应
   调整后的代码示例：

   fetch(URL, {
     method: "POST",
     headers: {
       "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
     },
     body: formBody,
   })
     .then((response) => {
       if (!response.ok) {
         // 处理HTTP状态码错误（比如409冲突，对应邮箱已注册）
         return response.json().then(errData => Promise.reject(errData));
       }
       return response.json();
     })
     .then((data) => {
       // 拿到提交成功的响应数据，存入组件状态用于渲染
       // 示例：setFormMessage(data.successMsg);
       console.log(data);
     })
     .catch((err) => {
       // 捕获邮箱已注册等错误提示，存入组件状态
       // 示例：setFormMessage(err.errorMsg);
       console.log(err);
     });
   

如果后端无法配置CORS的替代方案： #

可以用React的代理功能，先安装http-proxy-middleware，再在项目根目录创建src/setupProxy.js文件：

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

module.exports = function(app) {
  app.use(
    '/api', // 前端请求的前缀
    createProxyMiddleware({
      target: '你的后端API地址', // 比如http://xxx.xxx.xxx
      changeOrigin: true,
    })
  );
};

之后前端请求URL改为/api/xxx，就能通过代理绕过跨域限制。

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