Next.js中getStaticProps使用Axios返回特殊Unicode数据异常问题

• 手动指定响应类型与编码
  Axios默认的响应解析逻辑可能和接口返回的编码不匹配，可强制设置响应类型为文本并指定utf-8编码，之后手动解析JSON：

  export async function getStaticProps() {
    const response = await axios.get('目标接口地址', {
      responseType: 'text',
      responseEncoding: 'utf-8'
    });
    const data = JSON.parse(response.data);
    return { props: { data } };
  }
  

• 禁用Axios自动转换响应数据
  Axios默认会自动转换响应内容，这个过程可能导致编码异常，关闭自动转换后手动处理数据：

  export async function getStaticProps() {
    const response = await axios.get('目标接口地址', {
      transformResponse: [(data) => data] // 跳过自动转换
    });
    const data = JSON.parse(response.data);
    return { props: { data } };
  }
  

• 强制指定请求头的编码
  如果接口返回的Content-Type未明确charset=utf-8，Axios可能用错误编码解析，可在请求头中强制声明接受utf-8编码：

  export async function getStaticProps() {
    const response = await axios.get('目标接口地址', {
      headers: {
        'Accept-Charset': 'utf-8'
      }
    });
    return { props: { data: response.data } };
  }
  

• 对齐fetch与Axios的请求头
  接口可能根据请求头返回不同编码内容，将fetch的请求头完全复制到Axios中，确保请求参数一致：

  export async function getStaticProps() {
    const response = await axios.get('目标接口地址', {
      headers: {
        'Accept': '*/*',
        // 补充fetch请求中包含的其他请求头
      }
    });
    return { props: { data: response.data } };
  }
  

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