Programmiererforum

useEffect(() => {

async function getPhones(){
try{
const response = await fetch(
`https://api.myapi.com/phones?detailed=true&brand=${brand}`
);
const json = await response.json();
setPhones(json)
} catch(error){
console.error('Error fetching phones:', error);
}
}
getPhones();
}, [])

app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_methods=["*"],
allow_headers=["*"]
)

Für den Kontext habe ich den folgenden JavaScript-Code, um einige Daten von meiner API über eine Get-Anfrage abzurufen
[code]useEffect(() => {

async function getPhones(){
try{
const response = await fetch(
`https://api.myapi.com/phones?detailed=true&brand=${brand}`
);
const json = await response.json();
setPhones(json)
} catch(error){
console.error('Error fetching phones:', error);
}
}
getPhones();
}, [])
[/code]
Was den Fehler ergibt:

Zugriff zum Abrufen unter
'http://api. myapi.io/phones/?detailed=true&brand=LG' (weitergeleitet von
'https://api.myapi.io/phones?detailed=true&brand=LG') vom Ursprung
'http://127.0.0.1:5173' wurde durch die CORS-Richtlinie blockiert: Auf der angeforderten
Ressource ist kein
'Access-Control-Allow-Origin'-Header vorhanden. Wenn eine undurchsichtige Antwort Ihren Anforderungen entspricht, setzen Sie den
Modus der Anfrage auf „no-cors“, um die Ressource mit deaktiviertem CORS abzurufen.

I Dann habe ich versucht, den FastAPI-Dokumenten und früheren Fragen zu Atack Overflow zu folgen, um Folgendes zu aktivieren:
[code]app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_methods=["*"],
allow_headers=["*"]
)
[/code]
Ich habe sogar versucht, die erlaubten_Methoden wegzulassen, wie bei einigen Stapelüberläufen angegeben, aber nichts davon funktioniert.
Das ist mir auch bei meinem aufgefallen useEffect-Anfrage, wenn ich die URL https://api.myapi.com/phones verwende, gibt es keinen CORS-Fehler, dessen Ursache ich nicht kenne