401 Unauthorized mit Vite-Umgebungsvariablen wird angezeigt – Schlüssel sind in der Konsole sichtbar, aber API-Aufrufe s ⇐ JavaScript

[Anonymous]

Ich arbeite mit Vite und versuche, API-Schlüssel aus meiner .env-Datei zu verwenden. Ich habe ein seltsames Problem, bei dem die Schlüssel in console.log() korrekt angezeigt werden, meine API-Anfragen jedoch mit dem Fehler 401 Unauthorized fehlschlagen.

Code: Select all

.env

Datei:
env

Code: Select all

VITE_UNSPLASH_KEY=my_actual_key
VITE_PEXELS_KEY=my_actual_key
VITE_GIPHY_KEY=my_actual_key

JavaScript-Code:
Javascript

Code: Select all

import axios from "axios";

const UNSPLASH_KEY = import.meta.env.VITE_UNSPLASH_KEY;
const PEXELS_KEY = import.meta.env.VITE_PEXELS_KEY;
const GIPHY_KEY = import.meta.env.VITE_GIPHY_KEY;

console.log(GIPHY_KEY); // Prints the key correctly in console

export async function fetchgif(query, page = 1, per_page = 20) {
const res = await axios.get(`https://api.giphy.com/v1/gifs/search`, {
params: {
api_key: GIPHY_KEY,
q: query,
limit: per_page,
offset: (page - 1) * per_page,
},
});
console.log(res.data.data);
}

Was ich erlebe:

• Wenn ich die API-Schlüssel direkt im Code fest codiere, funktioniert alles perfekt
• console.log() zeigt, dass die Schlüssel korrekt aus .env geladen werden
• Pexels API funktioniert gut mit der env-Variable
• Unsplash- und Giphy-APIs geben beide 401 Unauthorized zurück mit env-Variablen
• Dev-Server wurde mehrmals neu gestartet
• Keine sichtbaren Leerzeichen oder Sonderzeichen im .env-Datei

Was ich versucht habe:

• Den Entwicklungsserver mehrmals neu starten
• Überprüfen, ob sich die .env-Datei im Stammverzeichnis befindet (gleiche Ebene wie package.json)
• Überprüfen, ob die Namen der Umgebungsvariablen mit VITE_ beginnen
• Bestätigen, dass die Schlüssel funktionieren, wenn sie fest codiert sind
• Verwenden von .trim() auf den Schlüsseln

Der verwirrende Teil:
Warum? Eine API (Pexels) funktioniert perfekt mit der Umgebungsvariablen, während die anderen beiden mit 401-Fehlern fehlschlagen, wenn alle drei genau gleich konfiguriert sind?
Irgendwelche Ideen, was dieses inkonsistente Verhalten verursachen könnte?