从前端JavaScript代码获取Spotify API访问令牌

我有一个web应用程序，允许人们生成与特定艺术家相关的艺术家的歌曲列表。我希望能够连接到用户的Spotify帐户，并从歌曲列表中为他们创建播放列表，但我需要获得访问令牌。我有一个开发人员帐户和客户ID，并试图通过授权流程工作，但它不适合我。相反，我得到了以下错误：

XMLHttpRequest无法加载https://accounts.spotify.com/authorize/?client_id=d137fe25b31c4f3ba9e29d85f…：3000/回调和范围=用户读取专用%20用户读取电子邮件和状态=34fFs29kd09。请求的资源上不存在“Access Control Allow Origin”标头。起源'http://localhost:3000因此，不允许访问。

这是我的

scripts.js

文件的一部分（我正在使用

spotifywebapi js

节点模块）：

根据我的研究，这是一个与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);
});

当我直接通过浏览器访问相关URL时，它会给我一个预期的“您是否授权此应用程序使用您的Spotify信息”表单

---

我是否需要“scripts.js”中的“cors”才能工作？有人有其他建议吗？

我认为这里的问题是，您试图从应该指导用户的端点检索JSON数据。因此，您应该在页面上提供一个链接到{…}URL的按钮，而不是向它发出请求。用户将继续向您的应用程序授予您在

范围

参数中指定的权限，并将被定向回您在

重定向uri

参数中指定的URL。这是您获得授权代码的地方，您可以在{…}端点中使用该代码。请阅读中有关授权代码流的更多信息

---

SpotifyWebAPI支持三种不同的oAuth流，您可能对此感兴趣。使用Node以Javascript编写的所有这些流的示例可以在上找到。

谢谢，这有助于解决这个问题。然而，在我授权应用程序使用我的Spotify信息后，它会重定向到

无法获取/回调？code={一堆我以前没有见过的随机字母和数字}

，这里的oAuth流或其他答案似乎都不能很好地解释这个问题。我在开发者设置中将

localhost:3000/callback

（3000是我的服务器端口）列为重定向。在用户跟随链接后，我试图通过另一个函数通过

getJSON

检索访问令牌&

json

未定义，这可能是问题吗？

code

参数中的值称为授权码。您的应用程序可以通过向发送

POST

请求来发送此代码，如中的步骤4所述。（可能您发送的是

GET

而不是

POST

）请确保您的本地web服务器正在端口3000上运行，另外，您在我的应用程序中配置的重定向URI也有端口3000。我相信它是在执行GET请求而不是POST…如何确保不会发生这种情况？jQuery文档可能会有所帮助。但这是一个单独的问题，所以我认为它需要一个不同的堆栈溢出问题。同意，所以我结束这个问题并接受你的答案——这有助于解决我眼前的问题！

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);
});