લોકહોસ્ટ હજુ પણ CORS એરર કેમ આપે છે
તમે તમારું frontend localhost:3000 પર ચલાવો છો. તમે તમારું backend localhost:5000 પર ચલાવો છો. બંને એપ્સ તમારા લેપટોપ પર છે. તેમ છતાં, તમને CORS એરર જોવા મળે છે.
આ બ્રાઉઝર 'origin' ને કેવી રીતે વ્યાખ્યાયિત કરે છે તેના કારણે થાય છે.
એક origin ત્રણ ભાગોનું બનેલું હોય છે:
- Protocol
- Domain
- Port
આ બંનેની સરખામણી કરો:
તેમનું protocol સમાન છે. તેમનું domain સમાન છે. પરંતુ તેઓ અલગ-અલગ ports નો ઉપયોગ કરે છે.
બ્રાઉઝર અલગ-અલગ ports ને અલગ-અલગ origins તરીકે જુએ છે.
જ્યારે તમારી React app તમારી API ને કોલ કરે છે, ત્યારે બ્રાઉઝર તેને cross-origin request તરીકે જુએ છે. તે તેમને બે અલગ entities તરીકે ગણે છે.
આ નિયમ શા માટે અસ્તિત્વ ધરાવે છે? સુરક્ષા (Security).
જો વેબસાઇટ્સ કોઈપણ API ને મુક્તપણે કોલ કરી શકતી હોત, તો એક દુષ્ટ (malicious) સાઇટ:
- તમારો બેંક ડેટા વાંચી શકે છે.
- પ્રાઇવેટ APIs ને એક્સેસ કરી શકે છે.
- તમારા વતી કામ કરી શકે છે.
બ્રાઉઝર આ રોકવા માટે Same-Origin Policy નો ઉપયોગ કરે છે. વેબસાઇટ B હા ન કહે ત્યાં સુધી વેબસાઇટ A તેને એક્સેસ કરી શકતી નથી.
CORS એટલે Cross-Origin Resource Sharing. તે તમારા સર્વર માટે બ્રાઉઝરને કહેવાની એક રીત છે: "હું આ ચોક્કસ origin માંથી આવતી requests પર વિશ્વાસ કરું છું."
તમે તમારા backend માં એક header ઉમેરીને આ ઠીક કરી શકો છો:
Access-Control-Allow-Origin: http://localhost:3000
આ બ્રાઉઝરને જણાવે છે કે request સુરક્ષિત છે.
મૂંઝવણનું એક સામાન્ય કારણ: તમે જુઓ છો કે request તમારા backend logs માં પહોંચી છે, પરંતુ frontend નિષ્ફળ જાય છે.
આ એટલા માટે થાય છે કારણ કે:
- Frontend request મોકલે છે.
- Backend સફળતાપૂર્વક request મેળવે છે.
- Backend સફળતાપૂર્વક response મોકલે છે.
- બ્રાઉઝર response મેળવે છે અને સુરક્ષા નિયમોને કારણે તેને બ્લોક કરી દે છે.
આ એરર એ બ્રાઉઝરનું સુરક્ષા ફીચર છે.
Postman અથવા cURL જેવા સાધનો કામ કરે છે કારણ કે તેઓ બ્રાઉઝર નથી. તેઓ બ્રાઉઝરની સુરક્ષા નીતિઓ (security policies) લાગુ કરતા નથી.
બ્રાઉઝર એ વાતને અવગણે છે કે બંને એપ્સ તમારા મશીન પર છે. તેને ફક્ત origin સાથે જ લેવાદેવા છે.