ಲೋಕಲ್ಹೋಸ್ಟ್ನಲ್ಲಿ ಇಂದೂ ಏಕೆ CORS ದೋಷಗಳು ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತವೆ?
ನೀವು ನಿಮ್ಮ ಫ್ರಂಟ್ಎಂಡ್ ಅನ್ನು localhost:3000 ನಲ್ಲಿ ರನ್ ಮಾಡುತ್ತೀರಿ. ನೀವು ನಿಮ್ಮ ಬ್ಯಾಕ್ಎಂಡ್ ಅನ್ನು localhost:5000 ನಲ್ಲಿ ರನ್ ಮಾಡುತ್ತೀರಿ. ಎರಡೂ ಅಪ್ಲಿಕೇಶನ್ಗಳು ನಿಮ್ಮ ಲ್ಯಾಪ್ಟಾಪ್ನಲ್ಲೇ ಇರುತ್ತವೆ. ಆದರೂ, ನೀವು CORS ದೋಷವನ್ನು ಕಾಣುತ್ತೀರಿ.
ಬ್ರೌಸರ್ಗಳು 'origin' ಅನ್ನು ಹೇಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ ಎಂಬ ಕಾರಣದಿಂದ ಹೀಗಾಗುತ್ತದೆ.
ಒಂದು origin ಮೂರು ಭಾಗಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ:
- Protocol
- Domain
- Port
ಈ ಎರಡನ್ನು ಹೋಲಿಸಿ ನೋಡಿ:
ಇವೆರಡೂ ಒಂದೇ protocol ಅನ್ನು ಹೊಂದಿವೆ. ಇವೆರಡೂ ಒಂದೇ domain ಅನ್ನು ಹೊಂದಿವೆ. ಆದರೆ ಇವು ಬೇರೆ ಬೇರೆ ports ಅನ್ನು ಬಳಸುತ್ತವೆ.
ಬ್ರೌಸರ್ಗಳು ಬೇರೆ ಬೇರೆ ports ಅನ್ನು ಬೇರೆ ಬೇರೆ origins ಎಂದು ಪರಿಗಣಿಸುತ್ತವೆ.
ನಿಮ್ಮ React ಅಪ್ಲಿಕೇಶನ್ ನಿಮ್ಮ API ಅನ್ನು ಕರೆದಾಗ, ಬ್ರೌಸರ್ ಅದನ್ನು cross-origin request ಎಂದು ನೋಡುತ್ತದೆ. ಅದು ಇವುಗಳನ್ನು ಎರಡು ಪ್ರತ್ಯೇಕ ಘಟಕಗಳೆಂದು ಪರಿಗಣಿಸುತ್ತದೆ.
ಈ ನಿಯಮ ಏಕೆ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ? ಭದ್ರತೆಗಾಗಿ (Security).
ವೆಬ್ಸೈಟ್ಗಳು ಯಾವುದೇ API ಅನ್ನು ಮುಕ್ತವಾಗಿ ಬಳಸಲು ಸಾಧ್ಯವಾದರೆ, ಒಂದು ದುಷ್ಟ (malicious) ಸೈಟ್ ಹೀಗೆ ಮಾಡಬಹುದು:
- ನಿಮ್ಮ ಬ್ಯಾಂಕ್ ಡೇಟಾವನ್ನು ಓದಬಹುದು.
- ಖಾಸಗಿ API ಗಳನ್ನು ಪ್ರವೇಶಿಸಬಹುದು.
- ನಿಮ್ಮ ಪರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಬಹುದು.
ಇದನ್ನು ತಡೆಯಲು ಬ್ರೌಸರ್ಗಳು Same-Origin Policy ಅನ್ನು ಬಳಸುತ್ತವೆ. ವೆಬ್ಸೈಟ್ B ಅನುಮತಿ ನೀಡದ ಹೊರತು ವೆಬ್ಸೈಟ್ A ಅದನ್ನು ಪ್ರವೇಶಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ.
CORS ಎಂದರೆ Cross-Origin Resource Sharing. ಇದು ನಿಮ್ಮ ಸರ್ವರ್ ಬ್ರೌಸರ್ಗೆ ಹೀಗೆ ಹೇಳುವ ಒಂದು ಮಾರ್ಗವಾಗಿದೆ: "ನಾನು ಈ ನಿರ್ದಿಷ್ಟ origin ನಿಂದ ಬರುವ ವಿನಂತಿಗಳನ್ನು (requests) ನಂಬುತ್ತೇನೆ."
ನಿಮ್ಮ ಬ್ಯಾಕ್ಎಂಡ್ಗೆ ಒಂದು header ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನೀವು ಇದನ್ನು ಸರಿಪಡಿಸಬಹುದು:
Access-Control-Allow-Origin: http://localhost:3000
ಇದು ವಿನಂತಿಯು ಸುರಕ್ಷಿತವಾಗಿದೆ ಎಂದು ಬ್ರೌಸರ್ಗೆ ತಿಳಿಸುತ್ತದೆ.
ಸಾಮಾನ್ಯ ಗೊಂದಲದ ಅಂಶ: ವಿನಂತಿಯು ನಿಮ್ಮ ಬ್ಯಾಕ್ಎಂಡ್ ಲಾಗ್ಗಳಿಗೆ (logs) ತಲುಪಿದರೂ, ಫ್ರಂಟ್ಎಂಡ್ ವಿಫಲವಾಗುವುದನ್ನು ನೀವು ಕಾಣುತ್ತೀರಿ.
ಇದು ಹೀಗಾಗಲು ಕಾರಣ:
- ಫ್ರಂಟ್ಎಂಡ್ ವಿನಂತಿಯನ್ನು ಕಳುಹಿಸುತ್ತದೆ.
- ಬ್ಯಾಕ್ಎಂಡ್ ವಿನಂತಿಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ.
- ಬ್ಯಾಕ್ಎಂಡ್ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು (response) ಯಶಸ್ವಿಯಾಗಿ ಕಳುಹಿಸುತ್ತದೆ.
- ಬ್ರೌಸರ್ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಭದ್ರತಾ ನಿಯಮಗಳ ಕಾರಣದಿಂದ ಅದನ್ನು ತಡೆಯುತ್ತದೆ (blocks).
ಈ ದೋಷವು ಬ್ರೌಸರ್ನ ಒಂದು ಭದ್ರತಾ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ.
Postman ಅಥವಾ cURL ನಂತಹ ಪರಿಕರಗಳು (tools) ಕೆಲಸ ಮಾಡುತ್ತವೆ ಏಕೆಂದರೆ ಅವು ಬ್ರೌಸರ್ಗಳಲ್ಲ. ಅವು ಬ್ರೌಸರ್ ಭದ್ರತಾ ನೀತಿಗಳನ್ನು ಜಾರಿಗೆ ತರುವುದಿಲ್ಲ.
ಎರಡೂ ಅಪ್ಲಿಕೇಶನ್ಗಳು ನಿಮ್ಮ ಯಂತ್ರದಲ್ಲೇ ಇವೆ ಎನ್ನುವ ಅಂಶವನ್ನು ಬ್ರೌಸರ್ ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ. ಅದು ಕೇವಲ origin ಬಗ್ಗೆ ಮಾತ್ರ ಗಮನಹರಿಸುತ್ತದೆ.