客户端凭据流适用于 curl 但不适用于浏览器

Posted 2023-04-15

【中文标题】客户端凭据流适用于 curl 但不适用于浏览器

【英文标题】：Client Credentials Flow works with curl but not in browser

【发布时间】：2017-05-16 19:59:07

【问题描述】：

我正在开发一个 Spotify 应用程序，我想获得令牌。

我正在关注 Client Credentials Flow 并使用 curl 一切正常：

$ curl -H "Authorization: Basic YjU4Y...llYTQ=" \
-d grant_type=client_credentials \
https://accounts.spotify.com/api/token
# Response:
# 
#   "access_token":"BQD3u...W4iJA",
#   "token_type":"Bearer",
#   "expires_in":3600
# 

这里是我的 html 文件的 javascript 代码，我尝试在其中获得相同的结果：

var url = "https://accounts.spotify.com/api/token";
var authentication = "YjU4Y...llYTQ=";
var params =  grant_type: "client_credentials" ;
var auth = "Basic " + authentication;

$.ajax(
  url: url,
  type: 'POST',
  dataType: 'json',
  headers: 
      'Authorization' : auth,
      'Access-Control-Allow-Origin': '*'
  ,
  data: params,
  success: function(data) 
      console.log('success', data);
  
);

但是，我收到以下错误：

XMLHttpRequest 无法加载 https://accounts.spotify.com/api/token。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'null'。

我做错了什么？

真的有办法使用 Javascript 从静态 HTML 文件中使用 Spotify API 吗？

【问题讨论】：

***.com/questions/33188989/… 似乎相关。和github.com/spotify/web-api-auth-examples。来自 Spotify 的 ***.com/users/540274/jos%C3%A9-m-p%C3%A9rez 似乎在回答问题。

感谢@sideshowbarker，但我不想要任何服务器端代码。

如果您尝试从客户端进行身份验证，为什么要使用由于 CORS 而需要服务器端应用程序的客户端凭据而不是隐式授权？也许我误解了这个问题。

我同意，您使用了错误的 oAuth 2.0 流程。查找隐式授予。

Implicit Grant Flow 需要一个 redirect_uri，如果我没有服务器，我不知道该放什么。抄送：@MichaelThelin

【参考方案1】：

什么都没有。浏览器不允许 CORS，除非服务器特别授权。在您的情况下，您无法控制服务器，因此您只有一个选择 - 破解浏览器。使用 Firefox 和 Chrome 的插件轻松完成。为 Firefox 搜索 CORS Everywhere。 chrome也有一个叫做访问控制允许*，或者类似的东西。

相信我...我花了一周时间尝试不同的 REST api。试过js fetch等。你必须用插件破解浏览器。

【讨论】：

但是 Spotify 希望开发者在这些情况下做些什么呢？破解浏览器是一个临时解决方案。

我无法特别与 Spotify 交谈。我从来没有看过它。看看他们是否发布了一些 API 文档。搜索“CORS”。那是你的问题 - CORS。