Spotify 请求授权错误 API

Request authorization error in Spotify API

我的 React 应用程序发生了最奇怪的事情。我已将 Client Id 和 Client Secret 移动到环境变量中,并使用 dotenv 将它们加载到此文件中以创建 authorization request:

// Inject environment variables
import dotenv from 'dotenv';
dotenv.config();

const clientID = process.env.CLIENT_ID;
const clientSecret = process.env.CLIENT_SECRET;

// Request authorization
const authOptions = {
  url: "https://accounts.spotify.com/api/token",
  headers: {
    "Authorization":
      "Basic " +
      new Buffer.from(clientID + ":" + clientSecret).toString("base64"),
    "Content-Type": "application/x-www-form-urlencoded",
  },
  form: {
    grant_type: "client_credentials",
  },
  json: true,
};

export default authOptions;

但我遇到 Failed to load resource: the server responded with a status of 400 () 错误:

{ error: "invalid_client", error_description: "Invalid client" }

奇怪的是,如果对客户端 ID 和密码进行硬编码,它会完美运行。

我什至在控制台中打印了环境变量并获得了正确的值,但是当我在授权中使用它们时 header 它停止工作。

有什么办法可以解决这个问题吗?

我遇到过一次这个错误。我重置了我的 client_secret,在 .env 文件中添加了新值,但忘记终止我的应用程序并再次 运行 它。在我重新运行我的应用程序后,它工作了。

据我所知,您所做的是在 React 中使用浏览器中不可用的环境变量。

Just a side note, maybe you shouldn't load secrets in the browser as that isn't a secure environment. Rather use the OAuth strategy for using your client id. Here's a link

将环境变量加载到您的应用程序。您需要在它前面加上 REACT_APP_Here's a link

这是一个例子

.env

REACT_APP_CLIENT_ID=my-spotify-client-id