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?
|
Come usare il proxy di React per aggirare i problemi di CORS tra frontend e API?
|
|
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
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
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
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
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
Ti va di condividere che stack usi esattamente e quale versione di React e Node stai usando per proporti una soluzione mirata per CORS
|
|
« Precedente | Successivo »
|

