将bug上报API函数移入独立JS类后出现CORS等报错问题求助

异常成因 #

• Uncaught (in promise) TypeError: response.json is not a function错误：logInfo为async异步方法，但内部调用fetch时未添加await关键字，导致response拿到的是fetch返回的Promise实例而非实际请求响应对象，不存在json方法。
• CORS相关错误：对比迁移前后代码可发现，原有代码请求头使用的是服务端允许的X-TrackerToken字段，抽离后的代码错误将请求头字段修改为Token，该字段不在服务端Access-Control-Allow-Headers允许列表中，触发预检请求拦截导致CORS报错。后续的TypeError: Failed to fetch是CORS拦截导致请求未正常发出触发的衍生报错。
• 额外逻辑错误：
  1. 请求头的Token插值多写了一个闭合大括号，写为${metadata.settings.token}}，会导致取值异常
  2. 初始化metadata时settings赋值为字符串"Hello"，不存在token属性，实际请求头的Token值会是undefined
  3. 触发请求时Logger.logInfo(bugInfo).then(console.log('print'))写法错误，console.log会在请求发起前立即执行，而非请求完成后触发回调

规避/修复方案 #

1. 补全fetch前的await关键字，修正请求头字段名和插值错误

static async logInfo(data = {}) {
  console.log('Hello!')
  const url = 'https://www.pivotaltracker.com/services/v5/projects/2530461/stories'
  // 补全await，修正请求头字段、插值错误
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      "X-TrackerToken": `${metadata.settings.token}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  });
  return response.json();
}

2. 修正metadata的赋值，确保存在token属性

const metadata = {
  settings: {
    token: "你的实际token值"
  }
}

3. 修正请求触发时的回调写法

Logger.logInfo(bugInfo).then(() => console.log('print'))

4. 可选优化：logInfo是静态方法，不需要实例化Logger也可调用；如果需要复用构造函数传入的settings，可以将静态方法改为实例方法，避免直接读取全局metadata

// 改为实例方法示例
async logInfo(data = {}) {
  const response = await fetch(url, {
    headers: {
      "X-TrackerToken": `${this.settings.token}`,
      // 其余配置不变
    }
  })
  // 调用时用实例调用：logger.logInfo(bugInfo)
}

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