启用 CORS 不适用于 Spotify Web API [重复]

Posted 2023-03-04

【中文标题】启用 CORS 不适用于 Spotify Web API [重复]

【英文标题】：Enabling CORS not working with Spotify Web API [duplicate]

【发布时间】：2019-10-22 15:30:31

【问题描述】：

我正在构建一个使用 Spotify Web API 的 Express 应用程序，并且我使用 ejs 作为我的视图引擎。我有一个 ejs 页面，您可以在其中单击一个按钮，然后它会调用我的 Express 服务器中的一个端点，该端点使用 res.redirect() 重定向几次（在同一服务器内），然后最终登陆一个像这样调用 https://accounts.spotify.com/authorize 的端点

res.redirect('https://accounts.spotify.com/authorize' +
      '?response_type=code' +
      '&client_id=' + process.env.SPOTIFY_CLIENT_ID +
      (scopes ? '&scope=' + encodeURIComponent(scopes) : '') +
      '&redirect_uri=' + encodeURIComponent(process.env.SPOTIFY_REDIRECT_URI))

但是，在我的浏览器的检查窗口中，这是我得到的错误：

Access to XMLHttpRequest at 'https://accounts.spotify.com/authorize?my params here' (redirected from 'http://localhost:5000/login') from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当我从我的 ejs 页面进行原始调用时，我使用 XMLHttpRequest 库并像这样发出请求：

xhttp.open("POST", "http://localhost:5000/login", true)
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
xhttp.setRequestHeader('Access-Control-Allow-Origin', '*')
xhttp.setRequestHeader('Access-Control-Allow-Method', 'GET, POST, PATCH, PUT, DELETE, OPTIONS')
xhttp.setRequestHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, X-Auth-Token')
xhttp.send(`email=$email&password=$password`)

我还在我的服务器端代码上使用 CORS 包，如下所示：

app.use(cors())

我需要在其他地方启用 CORS，还是我完全缺少其他东西？

【参考方案1】：

1) 从客户端（ejs 页面）拨打电话时，您不必发送 Access-Control-* 标头。

2) 服务器需要使用 Access-Control-* 标头进行响应以允许 CORS。服务器还需要先处理“OPTIONS”请求。通常，我不使用这样的 cors 中间件来执行此操作：

// Enabling CORS
app.use((req, res, next) => 
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "*");

  if (req.method === "OPTIONS") 
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH");
    return res.status(200).json();
  
  next();
);

使用 * 不是一个好习惯，并且在浏览器需要接受 cookie 的情况下是不允许的。但是您现在可以使用它来测试您的 api。

以上也可以使用cors中间件来实现。 下面一行：

app.use(cors())

在请求发送到任何路由/控制器之前应该只添加一次。 这可确保为每个响应实际添加允许 CORS 所需的标头。

更新： 如果你想从浏览器访问 spotify 页面，它应该从你的客户端（ejs 页面）重定向。从您的服务器获取必要的数据并使用它从您的客户端重定向。

【讨论】：

是的，我把它放在每条路线之前

更新了答案。你能检查一下服务器的响应，看看它是否包含 Access-Control-Allow-Origin 标头吗？

所以你是说我应该做这两个选项中的一个而不是两个？

是的。两种选择中的任何一种。两者都不是。

尝试使用邮递员进行 api 调用并检查您的服务器是否返回 Access-Control-* 标头。