使用fetch请求接口返回401未授权，同参数Ajax请求正常如何修复

问题根因 #

你的fetch请求没有像正常运行的Ajax代码那样，携带query和apikey两个自定义鉴权头，因此触发接口401未授权错误。

代码修复 #

修改你代码中的getData方法，为fetch调用补充headers配置即可：

const getData = async(url) => {
  // 补充fetch的第二个配置参数，传入请求头
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      query: "RecyclableGet(0)",
      apikey: sessionStorage.getItem("apikey")
    }
  });
  const json = await response.json();
  return buildTable(json);
};

额外优化建议 #

你当前的逻辑存在冗余请求问题：外层已经通过Ajax请求接口拿到了返回数据，不需要再嵌套调用fetch重复请求同一个接口，直接把Ajax返回的data传给buildTable方法即可，性能更高也不会重复占用接口请求资源：

// 直接在Ajax的success回调里调用buildTable，删掉嵌套的fetch相关代码即可
success:function(data,xhr,textStatus) {
  const buildTable = data => {
    const table = document.querySelector('.table tbody');
    for (let i = 0; i < data.length; i++) {
      let row = `<tr>
        <td>${data[i].RecyclableID}</td>
        <td>${data[i].Name}</td>
        <td>${data[i].RecyclableType}</td>
        </tr>`;
      table.insertAdjacentHTML('beforeEnd', row);
    }
  };
  // 直接用当前Ajax返回的data渲染表格
  buildTable(data);
  // 剩下的表格行点击逻辑保留即可
  $(document).ready(function() {
    const btns = $('.change-row');
    $("tbody").on('click', 'tr', function(e) {
      $(this).toggleClass('highlight');
      if ($('tbody tr').hasClass('highlight')) {
        btns.prop('disabled', false).removeClass('disabled dark');
      } else {
        btns.prop('disabled', true).addClass('disabled dark');
      }
    });
  });
}

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