Question

我正在构建一个使用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还是我完全缺少其他功能？

Answer 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页面）重定向该页面。从服务器获取必要的数据，并将其用于从客户端重定向。

启用CORS不适用于Spotify Web API

1 个答案: