如何仅用JavaScript解决调用Deezer歌曲搜索API的CORS问题？

最佳方案：自建后端代理 #

前端直接调用第三方API遭遇CORS限制是浏览器的安全机制，最可靠的解决方式是通过后端中转请求：

• 自己搭建一个简单的后端服务，由后端发起对Deezer API的请求，前端再调用自己的后端接口
• 这种方式不受第三方代理的限制，也更安全（可以在后端处理API密钥等敏感信息）

Node.js + Express 代理示例 #

const express = require('express');
const fetch = require('node-fetch');
const app = express();

// 允许前端跨域调用自己的后端
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

// 中转Deezer API请求的接口
app.get('/api/deezer', async (req, res) => {
  try {
    const deezerUrl = `https://api.deezer.com/${req.query.path}`;
    const response = await fetch(deezerUrl);
    const data = await response.json();
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: '请求失败' });
  }
});

app.listen(3000, () => console.log('代理服务运行在3000端口'));

前端调用时，直接请求自己的后端接口：

async function getMoreSongs(path) {
  const res = await fetch(`http://localhost:3000/api/deezer?path=${path}`);
  const data = await res.json();
  showData(data);
}

正确使用公共CORS代理（以cors-anywhere为例） #

你遇到的403错误是因为公共cors-anywhere实例有访问限制，需要先获取临时权限：

1. 访问该代理的/corsdemo页面，点击页面中的按钮，申请临时访问权限（这一步是为了让代理服务器将你的IP加入白名单，有效期约24小时）
2. 权限申请成功后，再使用原代码发起请求即可

如果公共代理频繁受限，建议自行部署cors-anywhere实例：

• 克隆cors-anywhere的仓库，部署到自己的服务器或云平台
• 部署后使用自己的代理地址，避免第三方限制

为什么no-cors模式不可行 #

使用fetch的no-cors模式时，浏览器会返回不透明响应（opaque response），这种响应无法读取内容（不能调用res.json()），所以会出现语法错误。该模式仅适用于不需要处理响应数据的场景，完全不适合你的需求。

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