前端Fetch API调用触发CORS预检请求错误排查

数据老陈

2026-6-24

问题原因及解决办法

核心问题：不必要的请求头触发CORS预检失败

你在GET请求里添加了Content-Type: application/json头，这会让浏览器发起CORS预检（OPTIONS请求），用来确认服务器是否允许这个自定义头。但saavn.dev的服务器没有正确处理这个OPTIONS请求，返回了非2xx的状态码，直接导致预检失败，进而触发了CORS错误。

GET请求本身不需要设置Content-Type头（因为GET没有请求体），这个配置完全多余，也是引发问题的关键。

解决步骤

移除多余的请求头
修改fetch配置，去掉headers里的Content-Type，甚至可以直接删掉整个headers选项，因为GET请求默认的头已经足够：
```
// 去掉headers配置，或改成空对象
fetch(`${saavnSearchUrl}?${new URLSearchParams(params)}`, {
  method: 'GET'
})
```
修复HTML拼接的语法错误
你在生成<li>标签的onclick属性时，少了一个闭合的单引号，会导致后续DOM操作出错：
原错误代码片段：
```
onclick="playSong('${highestQualityDownloadUrl.link}','${image150x150.link}'>
```
修正后：
```
onclick="playSong('${highestQualityDownloadUrl.link}','${image150x150.link}')">
```
关于CSRF token的说明
CSRF token主要用于防范跨站请求伪造，通常在POST/PUT等修改数据的请求中使用，GET请求不需要这个配置。你添加CSRF token无法解决当前的CORS预检问题，所以没有效果。