GET请求传递查询字符串遇404错误，如何解决？

咱们先拆解下你遇到的核心问题：Postman里能正常调用API拿到数据，但自己写的fetch代码发GET请求却返回404，这大概率是因为前端请求的参数传递方式和后端API的预期不匹配。

几个可能的排查方向和修复方案 #

• 检查参数传递的方式
  你现在的代码是把参数直接拼在URL路径里：/rank/hello，但你说在Postman里是用JSON格式发送GET请求——这里要注意：绝大多数后端框架默认不会处理GET请求的请求体数据，所以你在Postman里能成功，大概率是实际把参数放在了**URL查询参数（Query Params）**里（比如/rank?keyword=hello），而不是路径里。
  如果是这种情况，你需要调整前端代码，把参数放在查询参数里，记得用encodeURIComponent处理特殊字符：

  const getDescription = async (string) => {
    // 用查询参数传递，encodeURIComponent处理特殊字符
    const response = await fetch(`/rank?keyword=${encodeURIComponent(string)}`, {
      method: "GET",
      headers: {
        Accept: "application/json",
      },
      // GET请求不需要Content-Type，因为没有请求体
    });
    const result = await response.json();
    console.log(result);
  };
  

• 确认后端路由配置
  你的请求URL是http://localhost:3000/rank/hello，但如果后端只配置了/rank这个路由（接收查询参数），没有配置/rank/:keyword这种路径参数的路由，那自然会返回404。这时候要么调整前端请求格式，要么让后端修改路由规则适配你的路径参数。

• 去掉多余的请求头
  GET请求里设置Content-Type: application/json其实是多余的（因为GET没有请求体），有些后端会对请求头做严格校验，可能因此拒绝请求，你可以尝试去掉这个头再测试。

关于你最终采用的POST方案 #

你提到让API提供者新增了POST接口来解决问题，这确实是个更靠谱的选择：
POST请求天然支持在请求体里携带JSON数据，后端处理起来更规范，尤其是当你的查询字符串比较长、包含特殊字符时，POST比GET更稳定（GET有URL长度限制）。对应的POST请求代码大概是这样：

const getDescription = async (string) => {
  const response = await fetch("/rank", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query: string })
  });
  const data = await response.json();
  console.log(data);
};

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