Next.js中Axios请求含波斯语关键词时的报错问题

云原生阿岚

2026-7-22

解决Next.js波斯语关键词搜索的URL编码错误

问题根源

非ASCII字符（如波斯语）直接作为URL参数传递时，不符合URL的ISO-8859-1编码规范，导致Next.js的RSC在处理fetch请求时抛出错误，进而触发页面无限刷新。

解决方案

对搜索关键词进行URL编码，使用encodeURIComponent()函数将非ASCII字符转换为符合URL规范的编码格式。

代码修改步骤

初始化keyword时，对url.keyword进行编码后再拼接参数
用户输入关键词时，同样对输入值编码后更新state，确保URL参数格式合法

修改后的代码

const [result, setResult] = useState([]);
// 初始化时对关键词做URL编码处理
const [keyword, setKeyword] = useState(url.keyword ? `&keyword=${encodeURIComponent(url.keyword)}` : "");

useEffect(() => {
  axios
    .get(`https://example.com/api/search-posts?${keyword}`)
    .then((d) => {
      setResult(d.data.allPosts);
    })
    .catch((e) => console.log("error", e));
}, [pn, keyword]);

// 处理用户输入的关键词时也要编码
const handleSearchInput = (inputValue) => {
  const encoded = inputValue ? `&keyword=${encodeURIComponent(inputValue)}` : "";
  setKeyword(encoded);
};