无法从Express服务器获取数据，React fetch请求返回状态0如何解决

核心问题原因 #

你在fetch配置中主动设置了mode: 'no-cors'，这是导致你无法正常读取响应的直接原因。
no-cors是专为不需要读取响应内容的跨域场景设计的（比如加载静态资源、上报埋点），该模式下返回的是opaque（不透明）类型的响应，JS层面完全无法访问响应体、响应头、真实状态码，所以你拿到的status固定为0、body为null，哪怕浏览器网络面板显示请求200成功也不例外。
Postman不受浏览器同源策略限制，所以不需要跨域配置也能正常拿到响应，和你当前的前端场景逻辑不同。

修复步骤 #

1. 首先删除fetch配置中的mode: 'no-cors'参数，修改后请求代码如下：

const getData = () => {
    fetch("http://localhost:8081", {
      method: "GET"
    }).then(response => response.text())
    .then(data => console.log(data))
    .catch(err => console.error(err));
}

2. 给Express服务端配置跨域访问权限，有两种常用方案：

• 方案一：使用官方cors中间件（更简单，适合大多数场景）
  先安装依赖：npm install cors
  然后在服务端代码中引入启用：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // 开发环境可以直接全局启用，生产环境可配置指定域名允许跨域

app.get('/', function (req, res) {
   res.send('Hey, I came from the express server');
})

• 方案二：手动配置跨域响应头，不需要额外安装依赖

app.get('/', function (req, res) {
   res.header('Access-Control-Allow-Origin', '*'); // 开发环境可填*，生产环境替换为你前端的实际域名
   res.send('Hey, I came from the express server');
})

完成以上两步后就能正常拿到200状态码和服务端返回的响应内容了。

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