如何访问createServer搭建的Mock Server数据及解决fetch报错

问题根源 #

你的Mock Server存在两个核心问题：

• 未配置跨域资源共享（CORS）头：如果前端运行在不同端口（比如默认的3000），浏览器会因同源策略拦截请求，导致空响应。
• 未设置Content-Type响应头：浏览器无法识别返回的JSON格式，进而无法正确解析响应内容。
• 响应发送的链式调用虽语法合法，但存在潜在的执行顺序风险，可能导致响应内容未正确发送。

修复方案 #

1. 修改Mock Server代码 #

更新服务器逻辑，添加CORS头、设置正确的Content-Type，并优化响应发送方式：

const http = require('http');
const json = require('./users.json');

const port = 6000;

http.createServer((req, res) => {
  // 配置CORS头，允许所有来源跨域请求
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  // 处理OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    res.writeHead(200).end();
    return;
  }

  if (req.url === '/users' && req.method === 'GET') {
    // 设置JSON响应头
    res.writeHead(200, { 'Content-Type': 'application/json' });
    // 发送JSON数据并结束响应
    res.end(JSON.stringify(json));
  } else {
    res.writeHead(404, { 'Content-Type': 'text/plain' });
    res.end('404 Not Found');
  }
}).listen(port, () => console.log(`Mock server listening on port ${port}`))

2. 优化useFetch钩子（可选但推荐） #

添加响应状态检查，避免在请求失败时尝试解析错误内容：

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const _fetch = async () => {
      try {
        const response = await fetch(url);
        // 检查响应状态是否成功
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
      } catch (err) {
        setError(err.message);
        console.error(err);
      }
    };

    _fetch();
  }, [url]);

  return { data, error };
};

export default useFetch;

3. 验证请求 #

确保Mock Server和前端项目同时运行，重新调用useFetch即可正常获取数据：

const { data: usersData, error } = useFetch("http://localhost:6000/users")

关键说明 #

• CORS头中的Access-Control-Allow-Origin: *适合开发环境，生产环境建议指定具体域名。
• 必须处理OPTIONS预检请求，否则浏览器会拦截跨域的GET请求（部分复杂请求会触发预检）。
• 设置Content-Type: application/json是让浏览器明确知道响应内容类型，避免解析失败。

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