部署博客集成功能后遇JSON解析错误，bodyparser无效求解决

错误提示Unexpected token '<', "<!doctype "... is not valid JSON说明你的前端请求${host}/blog/blogs后，后端返回的是HTML文档（通常是404/500错误页面、登录跳转页等），而非预期的JSON数据，导致response.json()解析失败。以下是具体排查和解决步骤：

• 确认部署环境的host配置正确
  本地和部署环境的后端地址可能不同，检查前端的host变量是否指向了正确的后端服务域名/IP，注意协议（http/https）是否匹配，路径有没有拼写错误。可以直接在浏览器地址栏访问${host}/blog/blogs，查看返回内容：如果是HTML，说明后端接口未正确响应。

• 检查后端路由与服务状态

  • 确认后端的/blog/blogs GET路由已正确注册，部署后的后端服务是否正常启动，端口、路径配置和本地一致。
  • 若接口需要认证，检查部署后前端localStorage.getItem("token")是否能获取到有效token：如果token无效/不存在，后端可能返回登录页面的HTML而非JSON格式的认证错误，此时需要处理未登录场景，或者确保部署环境下token能正确传递。
  • 排查跨域（CORS）配置：部署后前后端域名不同可能触发跨域，若后端CORS配置错误，可能返回错误页面而非JSON。

• 添加响应状态码检查
  在前端代码中，调用response.json()前先判断响应是否成功，提前捕获非200状态的请求，避免解析错误：

  useEffect(() => {
    const fetchBlogs = async () => {
      try {
        const url = `${host}/blog/blogs`;
        const response = await fetch(url, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            "authtoken": localStorage.getItem("token")
          },
        });
        // 新增状态码检查
        if (!response.ok) {
          throw new Error(`请求失败，状态码：${response.status}`);
        }
        const allblogs = await response.json();
        setBlogs(allblogs);
        setLoading(false);
        extractUniqueTags(allblogs);
      } catch (error) {
        console.error('Error fetching blogs:', error.message);
        setLoading(false);
      }
    };
  
    fetchBlogs();
    // eslint-disable-next-line
  }, []);
  

• 关于bodyparser的说明
  bodyparser用于解析POST/PUT等请求的请求体，而你的请求是GET方法，不需要bodyparser处理，因此用它解决不了当前问题，无需在这方面继续排查。

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