如何在Chrome开发者工具控制台中显示fetch的响应内容？

嘿，我一眼就看出问题出在你设置的mode: 'no-cors'上了——当你开启这个模式时，浏览器会为了跨域安全返回一个opaque response（不透明响应），这种响应是被严格限制的：

• 它的状态码永远是0
• 无法读取任何响应头
• 完全不能访问响应体（也就是你想用res.text()获取的内容）
• 控制台显示的Promise {<pending>}很容易误导人，其实Promise大概率已经resolve了，但你根本拿不到任何有效数据

方案1：移除mode: 'no-cors'，后端配置CORS（推荐） #

这是跨域请求的标准解决方案，步骤很清晰：

1. 先修改你的fetch代码，删掉mode: 'no-cors'，同时加上错误处理：

fetch('http://localhost:8000/data/random?m=2&n=3')
  .then(res => {
    if (!res.ok) throw new Error(`请求失败！状态码：${res.status}`);
    return res.text();
  })
  .then(console.log)
  .catch(console.error); // 必须加catch，不然异常会被吃掉！

2. 在你的后端服务（比如Node.js/Express）中添加CORS响应头，允许前端域名访问：

// Express示例代码
const express = require('express');
const app = express();

// 开发环境可以临时允许所有域名，生产环境记得改成具体前端域名
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 你的路由逻辑
app.get('/data/random', (req, res) => {
  res.send('生成的随机数据内容');
});

app.listen(8000);

方案2：使用本地代理服务器（无法修改后端时） #

如果没法改动后端配置，你可以在前端本地搭个代理，把请求转发到目标服务器，这样就不存在跨域问题了。比如用Webpack Dev Server的代理：
在webpack.config.js里添加：

module.exports = {
  // ...其他配置项
  devServer: {
    proxy: {
      '/data': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
  }
};

然后你的fetch请求改成：

fetch('/data/random?m=2&n=3')
  .then(res => res.text())
  .then(console.log)
  .catch(console.error);

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