𝗪𝗵𝘆 𝗟𝗼𝗰𝗮𝗹𝗵𝗼𝘀𝘁 ਅਜੇ ਵੀ 𝗖𝗢𝗥𝗦 Errors ਕਿਉਂ ਦਿੰਦਾ ਹੈ
ਤੁਸੀਂ ਆਪਣਾ frontend localhost:3000 'ਤੇ ਚਲਾਉਂਦੇ ਹੋ। ਤੁਸੀਂ ਆਪਣਾ backend localhost:5000 'ਤੇ ਚਲਾਉਂਦੇ ਹੋ। ਦੋਵੇਂ ਐਪਸ ਤੁਹਾਡੇ ਲੈਪਟਾਪ 'ਤੇ ਹਨ। ਫਿਰ ਵੀ, ਤੁਹਾਨੂੰ CORS error ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।
ਇਹ ਇਸ ਲਈ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ ਬ੍ਰਾਊਜ਼ਰ (browsers) ਇੱਕ origin ਨੂੰ ਕਿਵੇਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹਨ।
ਇੱਕ origin ਤਿੰਨ ਹਿੱਸਿਆਂ ਤੋਂ ਬਣਿਆ ਹੁੰਦਾ ਹੈ:
- Protocol
- Domain
- Port
ਇਹਨਾਂ ਦੋਵਾਂ ਦੀ ਤੁਲਨਾ ਕਰੋ:
ਇਹਨਾਂ ਦਾ protocol ਇੱਕੋ ਹੈ। ਇਹਨਾਂ ਦਾ domain ਇੱਕੋ ਹੈ। ਇਹ ਵੱਖ-ਵੱਖ ports ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।
ਬ੍ਰਾਊਜ਼ਰ ਵੱਖ-ਵੱਖ ports ਨੂੰ ਵੱਖ-ਵੱਖ origins ਵਜੋਂ ਦੇਖਦੇ ਹਨ।
ਜਦੋਂ ਤੁਹਾਡੀ React app ਤੁਹਾਡੀ API ਨੂੰ ਕਾਲ ਕਰਦੀ ਹੈ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ cross-origin request ਦੇਖਦਾ ਹੈ। ਇਹ ਉਹਨਾਂ ਨੂੰ ਦੋ ਵੱਖ-ਵੱਖ entities ਵਜੋਂ ਦੇਖਦਾ ਹੈ।
ਇਹ ਨਿਯਮ ਕਿਉਂ ਮੌਜੂਦ ਹੈ? ਸੁਰੱਖਿਆ (Security)।
ਜੇਕਰ ਵੈੱਬਸਾਈਟਾਂ ਕਿਸੇ ਵੀ API ਨੂੰ ਸੁਤੰਤਰ ਰੂਪ ਵਿੱਚ ਕਾਲ ਕਰ ਸਕਦੀਆਂ, ਤਾਂ ਇੱਕ ਮਾਲੀਸ਼ੀਅਸ (malicious) ਸਾਈਟ:
- ਤੁਹਾਡਾ ਬੈਂਕ ਡੇਟਾ ਪੜ੍ਹ ਸਕਦੀ ਹੈ।
- ਪ੍ਰਾਈਵੇਟ APIs ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਦੀ ਹੈ।
- ਤੁਹਾਡੇ ਵੱਲੋਂ ਕੰਮ ਕਰ ਸਕਦੀ ਹੈ।
ਬ੍ਰਾਊਜ਼ਰ ਇਸ ਨੂੰ ਰੋਕਣ ਲਈ Same-Origin Policy ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਵੈੱਬਸਾਈਟ A, ਵੈੱਬਸਾਈਟ B ਤੱਕ ਉਦੋਂ ਤੱਕ ਪਹੁੰਚ ਨਹੀਂ ਕਰ ਸਕਦੀ ਜਦੋਂ ਤੱਕ ਵੈੱਬਸਾਈਟ B ਹਾਂ ਨਹੀਂ ਕਹਿੰਦੀ।
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 ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ ਅਤੇ ਸੁਰੱਖਿਆ ਨਿਯਮਾਂ ਕਾਰਨ ਇਸਨੂੰ ਬਲਾਕ ਕਰ ਦਿੰਦਾ ਹੈ।
ਇਹ error ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਸੁਰੱਖਿਆ ਫੀਚਰ ਹੈ।
Postman ਜਾਂ cURL ਵਰਗੇ ਟੂਲ ਕੰਮ ਕਰਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹ ਬ੍ਰਾਊਜ਼ਰ ਨਹੀਂ ਹਨ। ਉਹ ਬ੍ਰਾਊਜ਼ਰ ਸੁਰੱਖਿਆ ਨੀਤੀਆਂ ਨੂੰ ਲਾਗੂ ਨਹੀਂ ਕਰਦੇ।
ਬ੍ਰਾਊਜ਼ਰ ਇਸ ਤੱਥ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰ ਦਿੰਦਾ ਹੈ ਕਿ ਦੋਵੇਂ ਐਪਸ ਤੁਹਾਡੀ ਮਸ਼ੀਨ 'ਤੇ ਹਨ। ਇਸਨੂੰ ਸਿਰਫ਼ origin ਦੀ ਚਿੰਤਾ ਹੁੰਦੀ ਹੈ।