正确解析Fetch API响应：获取JSON数据与处理CORS问题

async function getInfoIncorrect() {
  const response = await fetch('https://api.example.com/demo');
  // 错误尝试：直接对response对象进行字符串化或解析
  const responseString = await response; // 这里的await response并不会得到JSON字符串
  const responseObject = await JSON.parse(JSON.stringify(responseString)); // 错误：无法正确解析JSON
  console.log(responseString);
  console.log(responseObject);
}

async function getInfoCorrect() {
  try {
    const response = await fetch('https://api.example.com/demo');

    // 检查HTTP响应状态码，确保请求成功
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // 正确方法：使用response.json()解析JSON响应体
    const responseObject = await response.json();
    console.log(responseObject); // 这里将打印出服务器返回的JSON数据
    return responseObject;
  } catch (error) {
    console.error('Fetch请求失败:', error);
    // 根据实际需求处理错误，例如显示错误消息给用户
    throw error;
  }
}

// 调用示例
getInfoCorrect();

// 后端服务器示例 (Node.js with Express)
const express = require('express');
const cors = require('cors');
const app = express();

// 允许来自特定源的请求
const corsOptions = {
  origin: 'https://your-frontend-domain.com', // 替换为你的前端域名
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  credentials: true, // 如果需要发送cookie等凭证
  optionsSuccessStatus: 204 // 对于预检请求的成功状态码
};

app.use(cors(corsOptions));

// 或者，如果允许所有源（不推荐用于生产环境）
// app.use(cors());

app.get('/api/demo', (req, res) => {
  res.json({ message: 'Hello from backend!', data: [1, 2, 3] });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

async function getInfoWithCORS() {
  try {
    // 移除 mode: 'no-cors'
    const response = await fetch('https://api.example.com/demo');

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const responseObject = await response.json();
    console.log('从服务器获取的数据:', responseObject);
    return responseObject;
  } catch (error) {
    console.error('Fetch请求或CORS错误:', error);
    throw error;
  }
}

// 调用示例
getInfoWithCORS();