Question

我有一个网络应用程序，允许人们生成与特定艺术家相关的艺术家的歌曲列表。我希望能够连接到用户的Spotify帐户，并从该歌曲列表中为他们创建播放列表，但我需要获取访问令牌。我有一个开发人员帐户和客户端ID，我正在尝试通过授权流程，但它不适合我。相反，我收到此错误：XMLHttpRequest cannot load https://accounts.spotify.com/authorize/?client_id=d137fe25b31c4f3ba9e29d85f…:3000/callback&scope=user-read-private%20user-read-email&state=34fFs29kd09. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

这是我的scripts.js文件的一部分（我使用spotify-web-api-js节点模块）：

$('#spotify').on('click', function() {
    $.support.cors = true;
    $.getJSON("https://accounts.spotify.com/authorize/?client_id=d137fe25b31c4f3ba9e29d85f4e47c66&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&scope=user-read-private%20user-read-email&state=34fFs29kd09", function(json2){
    $.getJSON("https://accounts.spotify.com/api/token/?grant_type=authorization_code&code=" + json2.code + "&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&client_id=d137fe25b31c4f3ba9e29d85f4e47c66&client_secret={...}", function(json3) {
      s.setAccessToken(json3.access_token);
      });
    });
  });
});

根据我的研究，这是一个与CORS相关的问题。我正在对我的ExpressJS服务器进行编辑以修复此跨源问题并安装了cors节点模块，但我仍然遇到相同的错误。

index.js服务器：

var express = require('express');
var cors = require('cors');
var app = express();
var port = 3000;

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});


 app.use(express.static(__dirname + '/public')); // looks in public directory, not root directory (protects files)

 app.get('/', function(req, res) {
     res.send(__dirname + '\\index.html')
});

app.listen(port, function() {
          console.log('CORS-enabled web server listening on port ' + port);
});

当我直接通过浏览器访问相关网址时，它会给我预期的＃34;您是否授权此应用使用您的Spotify信息＆＃34;形式。

我应该要求＆＃39; cors＆＃39;在＆＃39; scripts.js＆＃39;它的工作？有没有人有任何其他建议？

Answer 1

我认为这里的问题是您尝试从应该引导用户的端点检索JSON数据。因此，您应该在页面上提供一个链接到https://accounts.spotify.com/authorize/ {...}网址的按钮，而不是向其发出请求。用户将继续为您的应用程序提供scope参数中指定的请求权限，并将返回到您在redirect_uri参数中指定的URL。您可以在此处获得授权代码，您可以在https://accounts.spotify.com/api/token/ {...}端点中使用该代码。阅读Authorization Guide。

中有关授权代码流的更多信息

Spotify Web API支持三种不同的oAuth流程，您可能对Implicit Grant感兴趣。使用Node在Javascript中编写的所有这些流的示例可在https://github.com/spotify/web-api-auth-examples获得。

使用Node.js / Express.js获取Spotify API访问令牌

1 个答案: