ஏன் localhost இன்னும் CORS பிழைகளை ஏற்படுத்துகிறது?
நீங்கள் உங்கள் frontend-ஐ localhost:3000-இல் இயக்குகிறீர்கள். உங்கள் backend-ஐ localhost:5000-இல் இயக்குகிறீர்கள். இரண்டு செயலிகளும் (apps) உங்கள் மடிக்கணினியிலேயே உள்ளன. இருப்பினும், நீங்கள் ஒரு CORS பிழையைப் பார்க்கிறீர்கள்.
உலாவிகள் (browsers) ஒரு origin-ஐ எவ்வாறு வரையறுக்கின்றன என்பதன் காரணமாகவே இது நிகழ்கிறது.
ஒரு origin மூன்று பகுதிகளைக் கொண்டது:
- Protocol
- Domain
- Port
இவற்றின் இரண்டையும் ஒப்பிட்டுப் பாருங்கள்:
இவை ஒரே protocol-ஐப் பகிர்ந்து கொள்கின்றன. இவை ஒரே domain-ஐப் பகிர்ந்து கொள்கின்றன. ஆனால் இவை வெவ்வேறு ports-களைப் பயன்படுத்துகின்றன.
வெவ்வேறு ports-களை உலாவிகள் வெவ்வேறு origins-களாகக் கருதுகின்றன.
உங்கள் React app உங்கள் API-ஐ அழைக்கும்போது, உலாவி அதை ஒரு cross-origin கோரிக்கையாகப் பார்க்கிறது. அவை இரண்டையும் தனித்தனி அமைப்புகளாக (entities) உலாவி கருதுகிறது.
இந்த விதி ஏன் உள்ளது? பாதுகாப்பு (Security).
இணையதளங்கள் எந்தவொரு API-யையும் சுதந்திரமாக அழைக்க முடிந்தால், ஒரு தீங்கிழைக்கும் தளம் (malicious site):
- உங்கள் வங்கித் தரவுகளைப் படிக்கலாம்.
- தனிப்பட்ட API-களை அணுகலாம்.
- உங்கள் சார்பாகச் செயல்படலாம்.
இதைத் தடுக்க உலாவிகள் Same-Origin Policy-யைப் பயன்படுத்துகின்றன. Website B அனுமதித்தால் ஒழிய, Website A அதன் தரவுகளை அணுக முடியாது.
CORS என்பது Cross-Origin Resource Sharing என்பதைக் குறிக்கிறது. இது உங்கள் சர்வர் உலாவியிடம் சொல்வதற்கான ஒரு வழியாகும்: "இந்த குறிப்பிட்ட origin-லிருந்து வரும் கோரிக்கைகளை நான் நம்புகிறேன்."
உங்கள் backend-இல் ஒரு header-ஐச் சேர்ப்பதன் மூலம் இதைச் சரிசெய்யலாம்:
Access-Control-Allow-Origin: http://localhost:3000
இது அந்த கோரிக்கை பாதுகாப்பானது என்று உலாவியிடம் கூறுகிறது.
பொதுவாக ஏற்படும் ஒரு குழப்பம்: கோரிக்கை உங்கள் backend logs-இல் பதிவாகியிருப்பதை நீங்கள் காண்பீர்கள், ஆனால் frontend தோல்வியடையும்.
இது ஏன் நிகழ்கிறது என்றால்:
- Frontend கோரிக்கையை அனுப்புகிறது.
- Backend கோரிக்கையை வெற்றிகரமாகப் பெறுகிறது.
- Backend வெற்றிகரமாகப் பதிலைத் (response) திருப்பி அனுப்புகிறது.
- உலாவி அந்தப் பதிலைப் பெறுகிறது, ஆனால் பாதுகாப்பு விதிகளின் காரணமாக அதைத் தடுக்கிறது.
இந்த பிழை என்பது உலாவியின் ஒரு பாதுகாப்பு அம்சமாகும்.
Postman அல்லது cURL போன்ற கருவிகள் வேலை செய்கின்றன, ஏனெனில் அவை உலாவிகள் அல்ல. அவை உலாவியின் பாதுகாப்பு விதிகளுக்குக் கட்டுப்பட்டவை அல்ல.
இரண்டு செயலிகளும் உங்கள் கணினியிலேயே உள்ளன என்ற உண்மையை உலாவி புறக்கணித்துவிடுகிறது. அது origin-ஐ மட்டுமே கவனிக்கும்.