从 Spotify API 获取访问令牌时出错 [重复]

Posted 2023-03-04

【中文标题】从 Spotify API 获取访问令牌时出错 [重复]

【英文标题】：Errors in fetching access token from Spotify API [duplicate]

【发布时间】：2020-01-09 04:41:43

【问题描述】：

请多多包涵，因为我对 React 还很陌生。

我正在尝试创建一个使用 Spotify api 的 React 应用程序。我想使用client credentials authorization flow。

我已经设置了一个基本的 React 应用程序并创建了一个 javascript 文件，该文件导出了一个函数，该函数使用以下内容并将 POST 请求发送到 spotify 令牌端点。

var authOptions = 
 url: "https://accounts.spotify.com/api/token",
 headers: 
   "Access-Control-Allow-Origin": "*",
   Authorization:
     "Basic " +
     new Buffer(client_id + ":" + client_secret).toString("base64")
 ,
 form: 
   grant_type: "client_credentials"
 ,
 json: true
;

一旦生成访问令牌，该函数就会返回它。我在 componentDidMount() 中调用此函数，但最终在控制台中出现此错误：

从源“http://localhost:3000”获取“https://accounts.spotify.com/api/token”的访问权限已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

既然我在标题中添加了“Access-Control-Allow-Origin”，那不应该修复它吗？我能做些什么来解决它？

注意：值得一提的是，如果我通过其他方法（例如 curl）生成访问令牌并使用该令牌执行 GET 请求来识别 API 端点，这似乎有效。只有我的 POST 请求才有问题。

抱歉，如果我遗漏了一些明显的东西。我以前从未处理过 CORS。

【问题讨论】：

请允许您的 URL 在 spotify 中吗？

【参考方案1】：

您不能将 Access-Control-Allow-* 标头设置为请求标头，因为它们是响应标头，而不是请求标头。您可以做的是使用 JSONP 或设置 node-express 服务器并将其用作代理，以便在那里设置 Access-Control-Allow-* 标头或使用 cors 库 (https://medium.com/@alexishevia/using-cors-in-express-cac7e29b005b)

有关 CORS 错误的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS