React Redux服务端渲染时fetch抛出‘only absolute urls are supported’求助

这个问题我之前帮不少开发者排查过，核心原因其实很简单：客户端和服务端的运行环境对URL的解析逻辑不一样。

为什么会出现这个错误？ #

在浏览器客户端运行时，fetch会自动结合当前页面的域名（比如http://localhost:3000），把相对URL（比如/api/data）拼接成完整的绝对URL。但在服务端的Node.js环境中，没有浏览器的window.location上下文，无法自动推断当前域名，所以直接用相对URL就会抛出这个错误。

具体解决方案 #

下面给你几个实用的解决思路，你可以根据自己的项目情况选择：

1. 配置全局API基础URL，动态拼接

在项目中定义一个全局的API基础地址，根据运行环境（开发/生产）切换，然后在所有fetch请求前拼接这个地址：

// 可以放在配置文件中，比如src/config.js
export const API_BASE_URL = process.env.NODE_ENV === 'production' 
  ? 'https://your-production-domain.com' 
  : 'http://localhost:3000';

// 在Redux的action中使用
import { API_BASE_URL } from '../config';

export const fetchUserData = () => async dispatch => {
  try {
    const response = await fetch(`${API_BASE_URL}/api/user`);
    const data = await response.json();
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
  } catch (err) {
    dispatch({ type: 'FETCH_USER_FAILED', payload: err.message });
  }
};

2. 在action中自动判断运行环境

通过检查window对象是否存在，来区分客户端和服务端，动态处理URL：

export const fetchPosts = () => async dispatch => {
  // 服务端环境下拼接基础URL，客户端直接用相对路径
  const baseUrl = typeof window === 'undefined' ? 'http://localhost:3000' : '';
  const response = await fetch(`${baseUrl}/api/posts`);
  const data = await response.json();
  dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: data });
};

3. 利用服务端请求上下文获取当前域名（适用于Next.js等框架）

如果你的项目用了Next.js这类SSR框架，可以在服务端数据获取方法（比如getServerSideProps）中，通过req对象获取当前请求的域名和协议，动态生成基础URL：

export async function getServerSideProps({ req }) {
  // 从请求头获取协议和主机名
  const protocol = req.headers['x-forwarded-proto'] || 'http';
  const host = req.headers.host;
  const baseUrl = `${protocol}://${host}`;

  // 用完整URL发起请求
  const response = await fetch(`${baseUrl}/api/posts`);
  const posts = await response.json();

  return { props: { posts } };
}

额外注意事项 #

• 不要硬编码基础URL到代码里，建议用环境变量管理（比如React项目用REACT_APP_API_BASE_URL，Next.js用NEXT_PUBLIC_API_BASE_URL），方便不同环境切换。
• 如果之前相对URL能正常工作，可能是之前的SSR逻辑中隐含处理了URL拼接（比如某些中间件或框架自带的功能），后来的改动可能移除了这部分逻辑，可以检查下最近的代码变更。

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