如何解决JavaScript调用Spotify搜索API时的CORS错误

该CORS拦截由两处代码写法错误触发，不涉及平台跨域策略本身的硬限制，修正代码即可解决：

• 触发当前报错的核心原因：请求头格式不符合HTTP规范。Spotify API要求携带token的请求头固定为键Authorization，值为Bearer 你的有效token，当前代码将请求头的键写成了Bearer，相当于向服务器发送了一个未被服务端CORS白名单允许的自定义头，跨域预检阶段就会被直接拦截
• 附带的参数传递错误：q、type属于接口的查询参数，不是fetch配置的合法字段，当前代码将其塞在fetch的第二个参数对象里，根本不会随请求发送出去，即使解决了CORS问题也拿不到正确的搜索结果

function searchApi() {
  const searchBox = window.document.getElementById("searchBox");
  const searchString = searchBox.value.trim();
  
  // 构造接口要求的查询参数
  const searchQuery = new URLSearchParams({
    q: searchString,
    type: "artist"
  });
  // 拼接带查询参数的完整请求地址
  const requestUrl = `${searchUrl}?${searchQuery.toString()}`;

  fetch(requestUrl, {
    method: "GET",
    headers: {
      // 严格按照接口规范写授权头格式
      "Authorization": `Bearer ${token}`
    }
  })
  .then(response => {
    // 加状态判断，提前抛出非200的错误，方便定位问题
    if (!response.ok) throw new Error(`请求异常，状态码${response.status}`);
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error(error));
}

• 确认使用的token未过期、是通过Spotify OAuth流程获取的具备搜索接口访问权限的有效凭证
• 确认在Spotify开发者后台配置的允许重定向URI、允许源列表里，已经加入了本地开发的http://localhost:3000地址，源匹配不一致也会触发跨域拦截
• 不要额外添加任何Spotify官方文档未声明支持的自定义请求头，否则会再次触发预检拦截

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