എന്തുകൊണ്ടാണ് ലോക്കൽഹോസ്റ്റിൽ (localhost) ഇപ്പോഴും CORS എററുകൾ ഉണ്ടാകുന്നത്?
നിങ്ങൾ നിങ്ങളുടെ ഫ്രണ്ട്എൻഡ് (frontend) localhost:3000-ൽ പ്രവർത്തിപ്പിക്കുന്നു. നിങ്ങളുടെ ബാക്കെൻഡ് (backend) localhost:5000-ൽ പ്രവർത്തിപ്പിക്കുന്നു. രണ്ട് ആപ്പുകളും നിങ്ങളുടെ ലാപ്ടോപ്പിലാണ് ഉള്ളത്. എന്നിട്ടും, നിങ്ങൾ ഒരു CORS എറർ കാണുന്നു.
ബ്രൗസറുകൾ ഒരു 'ഒറിജിൻ' (origin) എങ്ങനെ നിർവചിക്കുന്നു എന്നതിനാലാണ് ഇത് സംഭവിക്കുന്നത്.
ഒരു ഒറിജിനിൽ മൂന്ന് ഭാഗങ്ങളുണ്ട്:
- പ്രോട്ടോക്കോൾ (Protocol)
- ഡൊമെയ്ൻ (Domain)
- പോർട്ട് (Port)
ഇവ രണ്ടും താരതമ്യം ചെയ്യുക:
ഇവ രണ്ടിനും ഒരേ പ്രോട്ടോക്കോൾ ആണ്. ഇവ രണ്ടിനും ഒരേ ഡൊമെയ്ൻ ആണ്. എന്നാൽ ഇവ വ്യത്യസ്ത പോർട്ടുകളാണ് ഉപയോഗിക്കുന്നത്.
വ്യത്യസ്ത പോർട്ടുകളെ ബ്രൗസറുകൾ വ്യത്യസ്ത ഒറിജിനുകളായിട്ടാണ് കാണുന്നത്.
നിങ്ങളുടെ React ആപ്പ് നിങ്ങളുടെ API വിളിക്കുമ്പോൾ, ബ്രൗസർ അതിനെ ഒരു ക്രോസ്-ഒറിജിൻ റിക്വസ്റ്റ് (cross-origin request) ആയി കാണുന്നു. അവയെ രണ്ട് വ്യത്യസ്ത കാര്യങ്ങളായിട്ടാണ് ബ്രൗസർ കണക്കാക്കുന്നത്.
എന്തുകൊണ്ടാണ് ഈ നിയമം നിലനിൽക്കുന്നത്? സുരക്ഷ (Security).
വെബ്സൈറ്റുകൾക്ക് ഏത് API-യും സ്വതന്ത്രമായി വിളിക്കാൻ കഴിയുമെങ്കിൽ, ഒരു ദുരുദ്ദേശ്യപരമായ സൈറ്റിന് (malicious site) ഇവ ചെയ്യാൻ സാധിക്കും:
- നിങ്ങളുടെ ബാങ്ക് വിവരങ്ങൾ വായിക്കാം.
- സ്വകാര്യ API-കളിൽ പ്രവേശിക്കാം.
- നിങ്ങളുടെ പേരിൽ പ്രവർത്തിക്കാം.
ഇത് തടയാൻ ബ്രൗസറുകൾ 'സെയിം-ഒറിജിൻ പോളിസി' (Same-Origin Policy) ഉപയോഗിക്കുന്നു. വെബ്സൈറ്റ് B അനുവാദം നൽകുന്നില്ലെങ്കിൽ വെബ്സൈറ്റ് A-യ്ക്ക് വെബ്സൈറ്റ് B-യെ ആക്സസ് ചെയ്യാൻ കഴിയില്ല.
CORS എന്നാൽ Cross-Origin Resource Sharing എന്നാണ് അർത്ഥം. "ഈ പ്രത്യേക ഒറിജിനിൽ നിന്നുള്ള റിക്വസ്റ്റുകളെ ഞാൻ വിശ്വസിക്കുന്നു" എന്ന് നിങ്ങളുടെ സെർവറിന് ബ്രൗസറിനോട് പറയാനുള്ള ഒരു മാർഗമാണിത്.
നിങ്ങളുടെ ബാക്കെൻഡിൽ ഒരു ഹെഡർ (header) ചേർക്കുന്നതിലൂടെ നിങ്ങൾക്ക് ഇത് പരിഹരിക്കാം:
Access-Control-Allow-Origin: http://localhost:3000
ഇത് റിക്വസ്റ്റ് സുരക്ഷിതമാണെന്ന് ബ്രൗസറിനെ അറിയിക്കുന്നു.
സാധാരണയായി ഉണ്ടാകുന്ന ഒരു ആശയക്കുഴപ്പം: റിക്വസ്റ്റ് നിങ്ങളുടെ ബാക്കെൻഡ് ലോഗുകളിൽ (logs) കാണുന്നുണ്ടെങ്കിലും ഫ്രണ്ട്എൻഡ് പരാജയപ്പെടുന്നു.
ഇത് സംഭവിക്കുന്നത് ഇപ്രകാരമാണ്:
- ഫ്രണ്ട്എൻഡ് റിക്വസ്റ്റ് അയക്കുന്നു.
- ബാക്കെൻഡ് റിക്വസ്റ്റ് വിജയകരമായി സ്വീകരിക്കുന്നു.
- ബാക്കെൻഡ് വിജയകരമായി റെസ്പോൺസ് (response) അയക്കുന്നു.
- ബ്രൗസർ റെസ്പോൺസ് സ്വീകരിക്കുന്നുണ്ടെങ്കിലും സുരക്ഷാ നിയമങ്ങൾ കാരണം അത് തടയുന്നു.
ഈ എറർ ഒരു ബ്രൗസർ സുരക്ഷാ ഫീച്ചറാണ്.
Postman അല്ലെങ്കിൽ cURL പോലുള്ള ടൂളുകൾ പ്രവർത്തിക്കുന്നത് അവ ബ്രൗസറുകൾ അല്ലാത്തതുകൊണ്ടാണ്. അവ ബ്രൗസർ സുരക്ഷാ നയങ്ങൾ (security policies) നടപ്പിലാക്കുന്നില്ല.
രണ്ട് ആപ്പുകളും നിങ്ങളുടെ മെഷീനിൽ തന്നെയാണെന്ന വസ്തുത ബ്രൗസർ പരിഗണിക്കുന്നില്ല. അത് ഒറിജിനെ (origin) മാത്രമേ ശ്രദ്ധിക്കുന്നുള്ളൂ.