Come usare il proxy di React per aggirare i problemi di CORS tra frontend e API?
#1
Sto lavorando a un piccolo progetto personale e mi sono bloccato su una cosa che forse è banale. Ho un’applicazione web in React che deve chiamare la mia API Node.js, ma quando faccio la richiesta da localhost:3000 a localhost:5000 il browser mi blocca tutto per problemi di CORS. Ho provato a impostare manualmente gli header nella risposta dell’API con Access-Control-Allow-Origin, ma non sembra funzionare. Mi chiedo se per casi semplici come il mio non sia meglio gestire il proxy direttamente dal server di sviluppo di React, per evitare di dover configurare tutto lato backend. Qualcuno si è trovato in una situazione simile e ha trovato una strada chiara?
Cita messaggio
#2
Per una soluzione rapida in sviluppo usa il proxy del progetto React Inserisci nel package json una voce proxy che punti al backend in ascolto su una porta diversa Poi riavvia il server di sviluppo In questo modo le richieste sembrano provenire dallo stesso origin e la questione CORS sparisce durante lo sviluppo Ricorda pero che funziona solo in sviluppo e in produzione va gestita la politica CORS o si usa un reverse proxy
Cita messaggio
#3
Il cuore della questione CORS sta nel fatto che se la policy e corretta la fetch funziona Verifica che il backend invii un header di origine consentita e che non stai richiedendo credenziali se non vuoi Se esiste un preflight non gestito la richiesta fallisce Il proxy di sviluppo evita tutto in fase di sviluppo ma non risolve la questione CORS in produzione
Cita messaggio
#4
Per chi preferisce una soluzione pratica in React con CRA esiste la via del proxy integrato Non digiti header ma inoltra le chiamate al backend tramite proxy di sviluppo In questo modo CORS non interferisce durante lo sviluppo In produzione resta da impostare CORS o usare un reverse proxy
Cita messaggio
#5
Mi sembra una scorciatoia ma c e dietro una motivazione Forse la questione non e solo CORS ma come intendi utilizzare il backend Se il backend e in dominio diverso devi comunque pensare a una policy appropriata CORS A volte e meglio mantenere separate le responsabilita e non affidarsi al proxy per l intera app
Cita messaggio
#6
Potrebbe valere considerare un reverse proxy a livello di server o una soluzione monorepo se stai costruendo una piccola architettura In locale un proxy del dev server va bene ma in produzione se vuoi davvero sicurezza e manutenibilità devi pensare a una strategia CORS ben definita o un gateway sul backend Non e una regola unica
Cita messaggio
#7
Ti va di condividere che stack usi esattamente e quale versione di React e Node stai usando per proporti una soluzione mirata per CORS
Cita messaggio


Risposta rapida
Messaggio
Scrivi qui il tuo messaggio.

Verifica Immagine
Per favore inserisci il testo contenuto nell'immagine nella casella di testo sotto ad essa. Questa operazione è necessaria per prevenire gli spam bot automatici.
Verifica Immagine
(maiuscole indifferenti)

Vai al forum: