Spotify 請求授權錯誤 API

Question

最奇怪的事情發生在我的 React 應用程序上。 我已將 Client Id 和 Client Secret 移動到環境變量中，並使用 dotenv 將它們加載到此文件中以創建授權請求：

// 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 中使用它們時它停止工作。

有沒有什么辦法解決這一問題？

Answer 1

從我看到你所做的是在瀏覽器中不可用的反應中使用 env 變量。

只是一個旁注，也許你不應該在瀏覽器中加載秘密，因為那不是一個安全的環境。 而是使用 OAuth 策略來使用您的客戶端 ID。 這是一個鏈接

將環境變量加載到您的應用程序。 您需要在它前面加上REACT_APP_ 。 這是一個鏈接

這是一個例子

.env

REACT_APP_CLIENT_ID=my-spotify-client-id

Answer 2

我有一次這個錯誤。 我重置了我的client_secret ，在.env文件中添加了新值，但忘記終止我的應用程序並再次運行它。 在我重新運行我的應用程序后，它起作用了。