ਸਹਿਜ ਬੈਕਐਂਡ ਸੰਚਾਰ ਲਈ ਪ੍ਰਤੀਕਿਰਿਆ ਵਿੱਚ POST ਬੇਨਤੀਆਂ ਨੂੰ ਸਰਲ ਬਣਾਉਣਾ
ਇੱਕ ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਕੰਮ ਕਰਨ ਦੀ ਕਲਪਨਾ ਕਰੋ ਜਿੱਥੇ ਫਰੰਟ-ਐਂਡ ਅਤੇ ਬੈਕ-ਐਂਡ ਸੰਪੂਰਨ ਇਕਸੁਰਤਾ ਵਿੱਚ ਕੰਮ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪ੍ਰਮਾਣੀਕਰਨ ਫਾਰਮ ਹੈ ਜਿਸਨੂੰ ਇੱਕ POST ਬੇਨਤੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੈਕਐਂਡ ਵਿੱਚ JSON ਦੇ ਰੂਪ ਵਿੱਚ ਉਪਭੋਗਤਾ ਦੀ ਈਮੇਲ ਅਤੇ ਪਾਸਵਰਡ ਭੇਜਣ ਦੀ ਲੋੜ ਹੈ। ਪਰ ਫਿਰ, ਤੁਸੀਂ ਇੱਕ ਰੁਕਾਵਟ ਵਿੱਚ ਚਲੇ ਜਾਂਦੇ ਹੋ—ਇੱਕ ਅਣਚਾਹੇ ਵਿਕਲਪ ਪ੍ਰੀਫਲਾਈਟ ਬੇਨਤੀ। 🛑
ਇਹ ਮੁੱਦਾ ਨਿਰਾਸ਼ਾਜਨਕ ਮਹਿਸੂਸ ਕਰ ਸਕਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਇਹ ਅਚਾਨਕ ਗਲਤੀਆਂ ਵੱਲ ਖੜਦਾ ਹੈ। JSON ਡਾਟਾ ਭੇਜਣ ਲਈ React ਵਿੱਚ `fetch` ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਬਹੁਤ ਸਾਰੇ ਡਿਵੈਲਪਰ ਇਸ ਸਥਿਤੀ ਦਾ ਸਾਹਮਣਾ ਕਰਦੇ ਹਨ। ਹਾਲਾਂਕਿ ਇਹ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ CORS ਨੀਤੀਆਂ ਲਈ ਆਮ ਵਿਵਹਾਰ ਹੈ, ਇਹ ਪਾਈਥਨ ਫਾਸਟਏਪੀਆਈ ਬੈਕਐਂਡ ਨਾਲ ਗੱਲਬਾਤ ਨੂੰ ਗੁੰਝਲਦਾਰ ਬਣਾ ਸਕਦਾ ਹੈ।
ਤੁਸੀਂ ਪ੍ਰੀਫਲਾਈਟ OPTIONS ਬੇਨਤੀ ਤੋਂ ਬਚਦੇ ਹੋਏ `'ਐਪਲੀਕੇਸ਼ਨ/x-www-form-urlencoded'` ਨੂੰ `ਸਮੱਗਰੀ-ਕਿਸਮ` ਵਜੋਂ ਵਰਤਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਸਕਦੇ ਹੋ। ਹਾਲਾਂਕਿ, ਬੈਕਐਂਡ ਬੇਨਤੀ ਨੂੰ ਅਸਵੀਕਾਰ ਕਰ ਦੇਵੇਗਾ ਕਿਉਂਕਿ ਇਹ ਇੱਕ JSON ਵਸਤੂ ਦੀ ਉਮੀਦ ਕਰਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਡਾ ਡੇਟਾ ਸਹੀ ਢੰਗ ਨਾਲ ਫਾਰਮੈਟ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਹੈ। ਇੱਕ ਕਲਾਸਿਕ ਦੁਬਿਧਾ! 😅
ਇਸ ਗਾਈਡ ਵਿੱਚ, ਅਸੀਂ ਇਹ ਪਤਾ ਲਗਾਵਾਂਗੇ ਕਿ ਅਜਿਹਾ ਕਿਉਂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਕਿਵੇਂ ਹੱਲ ਕਰਨਾ ਹੈ। ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ OPTIONS ਬੇਨਤੀਆਂ ਨੂੰ ਟਰਿੱਗਰ ਕੀਤੇ ਬਿਨਾਂ JSON ਡੇਟਾ ਭੇਜਣ ਦਾ ਇੱਕ ਵਿਹਾਰਕ ਹੱਲ ਹੋਵੇਗਾ, React ਅਤੇ FastAPI ਵਿਚਕਾਰ ਸੁਚਾਰੂ ਸੰਚਾਰ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋਏ।
| ਹੁਕਮ | ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ |
|---|---|
| origins | ਇਹ FastAPI ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ CORS ਲਈ ਮਨਜ਼ੂਰਸ਼ੁਦਾ ਮੂਲ ਦੀ ਸੂਚੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਉਦਾਹਰਨ: origins = ["http://localhost:3000"] ਫਰੰਟਐਂਡ ਤੋਂ ਬੇਨਤੀਆਂ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। |
| CORSMiddleware | ਫਾਸਟਏਪੀਆਈ ਵਿੱਚ ਕ੍ਰਾਸ-ਓਰੀਜਨ ਰਿਸੋਰਸ ਸ਼ੇਅਰਿੰਗ (CORS) ਨੂੰ ਹੈਂਡਲ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਮਿਡਲਵੇਅਰ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਵੱਖ-ਵੱਖ ਮੂਲ ਦੀਆਂ ਬੇਨਤੀਆਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰੋਸੈਸ ਕੀਤਾ ਗਿਆ ਹੈ। ਉਦਾਹਰਨ: app.add_middleware(CORSmiddleware, allow_origins=origins, ...)। |
| request.json() | ਇਹ FastAPI ਵਿੱਚ ਇੱਕ POST ਬੇਨਤੀ ਤੋਂ JSON ਬਾਡੀ ਨੂੰ ਮੁੜ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਉਦਾਹਰਨ: ਡੇਟਾ = await request.json() ਫਰੰਟਐਂਡ ਦੁਆਰਾ ਭੇਜੇ ਗਏ ਪੇਲੋਡ ਨੂੰ ਕੱਢਦਾ ਹੈ। |
| TestClient | ਯੂਨਿਟ ਟੈਸਟਾਂ ਵਿੱਚ HTTP ਬੇਨਤੀਆਂ ਦੀ ਨਕਲ ਕਰਨ ਲਈ ਇੱਕ FastAPI-ਵਿਸ਼ੇਸ਼ ਟੈਸਟਿੰਗ ਕਲਾਇੰਟ। ਉਦਾਹਰਨ: ਗਾਹਕ = TestClient(ਐਪ) ਕਲਾਇੰਟ ਨੂੰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ। |
| fetch | ਫਰੰਟਐਂਡ ਵਿੱਚ HTTP ਬੇਨਤੀਆਂ ਕਰਨ ਲਈ ਇੱਕ JavaScript ਫੰਕਸ਼ਨ। ਉਦਾਹਰਨ: fetch(url, { ਵਿਧੀ: "POST", ਸਿਰਲੇਖ: {...}, body: JSON.stringify(data) }) ਬੈਕਐਂਡ ਨੂੰ ਡੇਟਾ ਭੇਜਦਾ ਹੈ। |
| JSON.stringify() | ਪ੍ਰਸਾਰਣ ਲਈ ਇੱਕ JavaScript ਵਸਤੂ ਨੂੰ JSON ਸਤਰ ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਉਦਾਹਰਨ: JSON.stringify(data) POST ਬੇਨਤੀ ਲਈ ਡਾਟਾ ਤਿਆਰ ਕਰਦਾ ਹੈ। |
| Accept header | ਲੋੜੀਂਦੇ ਜਵਾਬ ਦੀ ਕਿਸਮ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ HTTP ਬੇਨਤੀਆਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਉਦਾਹਰਨ: "ਸਵੀਕਾਰ ਕਰੋ": "ਐਪਲੀਕੇਸ਼ਨ/json" ਸਰਵਰ ਨੂੰ JSON ਵਾਪਸ ਕਰਨ ਲਈ ਕਹਿੰਦਾ ਹੈ। |
| allow_headers | ਦੱਸਦਾ ਹੈ ਕਿ CORS ਪ੍ਰੀਫਲਾਈਟ ਬੇਨਤੀਆਂ ਦੌਰਾਨ ਕਿਹੜੇ ਸਿਰਲੇਖਾਂ ਦੀ ਇਜਾਜ਼ਤ ਹੈ। ਉਦਾਹਰਨ: allow_headers=["*"] ਸਾਰੇ ਸਿਰਲੇਖਾਂ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। |
| body | HTTP ਬੇਨਤੀਆਂ ਵਿੱਚ ਪੇਲੋਡ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ। ਉਦਾਹਰਨ: body: JSON.stringify(data) ਵਿੱਚ ਇੱਕ POST ਬੇਨਤੀ ਵਿੱਚ ਉਪਭੋਗਤਾ ਡੇਟਾ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ। |
| allow_methods | ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਕਿ CORS ਬੇਨਤੀਆਂ ਵਿੱਚ ਕਿਹੜੀਆਂ HTTP ਵਿਧੀਆਂ ਦੀ ਇਜਾਜ਼ਤ ਹੈ। ਉਦਾਹਰਨ: allow_methods=["*"] GET, POST, ਅਤੇ DELETE ਵਰਗੀਆਂ ਸਾਰੀਆਂ ਵਿਧੀਆਂ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। |
ਬਿਨਾਂ ਵਿਕਲਪਾਂ ਦੇ JSON ਪੋਸਟ ਬੇਨਤੀਆਂ ਲਈ ਹੱਲਾਂ ਨੂੰ ਸਮਝਣਾ ਅਤੇ ਲਾਗੂ ਕਰਨਾ
ਪਹਿਲਾਂ ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਗਈਆਂ ਸਕ੍ਰਿਪਟਾਂ ਵਿੱਚ, ਮੁੱਖ ਚੁਣੌਤੀ ਨੂੰ ਸੰਬੋਧਿਤ ਕੀਤਾ ਗਿਆ ਹੈ OPTIONS ਪ੍ਰੀਫਲਾਈਟ ਬੇਨਤੀ ਨੂੰ ਟਰਿੱਗਰ ਕੀਤੇ ਬਿਨਾਂ ਇੱਕ ਬੈਕਐਂਡ ਵਿੱਚ JSON ਡੇਟਾ ਭੇਜਣ ਦਾ ਮੁੱਦਾ। ਇਹ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ CORS ਦੀਆਂ ਸਖ਼ਤ ਲੋੜਾਂ ਕਾਰਨ ਵਾਪਰਦਾ ਹੈ। ਇਸ ਨੂੰ ਦੂਰ ਕਰਨ ਲਈ, ਅਸੀਂ ਸਿਰਲੇਖਾਂ ਨੂੰ ਐਡਜਸਟ ਕਰਨਾ, ਬੈਕਐਂਡ ਮਿਡਲਵੇਅਰ ਨੂੰ ਕੌਂਫਿਗਰ ਕਰਨਾ, ਅਤੇ ਸਹੀ ਬੇਨਤੀ ਅਤੇ ਜਵਾਬ ਫਾਰਮੈਟਾਂ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਵਰਗੀਆਂ ਰਣਨੀਤੀਆਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਉਦਾਹਰਨ ਲਈ, FastAPI ਵਿੱਚ, ਅਸੀਂ ਇਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ ਮੂਲ, ਵਿਧੀਆਂ, ਅਤੇ ਸਿਰਲੇਖਾਂ ਦੀ ਆਗਿਆ ਦੇਣ ਲਈ ਜੋ ਫਰੰਟਐਂਡ ਦੀਆਂ ਬੇਨਤੀਆਂ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ। ਇਹ ਦੋਵਾਂ ਪ੍ਰਣਾਲੀਆਂ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਸਹਿਜ ਹੈਂਡਸ਼ੇਕ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ। 🛠
FastAPI ਸਕ੍ਰਿਪਟ POST ਬੇਨਤੀਆਂ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਰਨ ਲਈ ਇੱਕ ਅਸਿੰਕ੍ਰੋਨਸ ਐਂਡਪੁਆਇੰਟ ਦੀ ਵਰਤੋਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ। ਜੋੜ ਕੇ ਅਤੇ CORS ਸੰਰਚਨਾ ਵਿੱਚ, ਸਰਵਰ ਪ੍ਰੀਫਲਾਈਟ ਬੇਨਤੀਆਂ ਤੋਂ ਬੇਲੋੜੀਆਂ ਗਲਤੀਆਂ ਤੋਂ ਬਚਦੇ ਹੋਏ ਆਉਣ ਵਾਲੇ ਡੇਟਾ ਨੂੰ ਸਵੀਕਾਰ ਕਰਨ ਦੇ ਯੋਗ ਹੁੰਦਾ ਹੈ। ਇਸ ਦੌਰਾਨ, ਫਰੰਟਐਂਡ 'ਤੇ, ਅਸੀਂ ਸਿਰਲੇਖਾਂ ਨੂੰ ਸਰਲ ਬਣਾਇਆ ਅਤੇ ਡੇਟਾ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਵਰਤ ਕੇ ਫਾਰਮੈਟ ਕੀਤਾ . ਇਹ ਸੁਮੇਲ ਜਟਿਲਤਾ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ ਅਤੇ ਸੰਚਾਰ ਦੌਰਾਨ ਅਚਾਨਕ ਅਸਵੀਕਾਰੀਆਂ ਵਰਗੇ ਮੁੱਦਿਆਂ ਤੋਂ ਬਚਦਾ ਹੈ।
ਇੱਕ ਹੋਰ ਮਹੱਤਵਪੂਰਨ ਹੱਲ ਹੈ ਲਾਗੂ ਕਰਨ ਨੂੰ ਪ੍ਰਮਾਣਿਤ ਕਰਨ ਲਈ FastAPI ਵਿੱਚ ਯੂਨਿਟ ਟੈਸਟਾਂ ਦੀ ਵਰਤੋਂ। ਦੇ ਨਾਲ POST ਬੇਨਤੀਆਂ ਦੀ ਨਕਲ ਕਰਕੇ , ਅਸੀਂ ਵੱਖ-ਵੱਖ ਦ੍ਰਿਸ਼ਾਂ ਦੇ ਤਹਿਤ ਅੰਤਮ ਬਿੰਦੂ ਦੇ ਵਿਵਹਾਰ ਦੀ ਜਾਂਚ ਕੀਤੀ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਹੱਲ ਉਮੀਦ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦਾ ਹੈ, ਭਾਵੇਂ ਉਤਪਾਦਨ ਵਿੱਚ ਤੈਨਾਤ ਕੀਤਾ ਗਿਆ ਹੋਵੇ। ਉਦਾਹਰਨ ਲਈ, ਟੈਸਟ ਸਕ੍ਰਿਪਟ JSON ਡੇਟਾ ਭੇਜਦੀ ਹੈ ਜੋ ਉਪਭੋਗਤਾ ਦੇ ਪ੍ਰਮਾਣ ਪੱਤਰਾਂ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ ਅਤੇ ਸਰਵਰ ਦੇ ਜਵਾਬ ਨੂੰ ਪ੍ਰਮਾਣਿਤ ਕਰਦੀ ਹੈ। ਇਹ ਵਿਧੀ ਭਰੋਸੇਯੋਗਤਾ ਦੀ ਇੱਕ ਵਾਧੂ ਪਰਤ ਜੋੜਦੀ ਹੈ ਅਤੇ ਲੰਬੇ ਸਮੇਂ ਦੀ ਸਾਂਭ-ਸੰਭਾਲ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ। ✅
ਫਰੰਟਐਂਡ 'ਤੇ, ਫੈਚ API ਨੂੰ ਬਿਨਾਂ ਕਿਸੇ ਵਾਧੂ ਸਿਰਲੇਖ ਦੇ ਬੇਨਤੀਆਂ ਭੇਜਣ ਲਈ ਕੌਂਫਿਗਰ ਕੀਤਾ ਗਿਆ ਹੈ ਜੋ CORS ਨੀਤੀਆਂ ਨੂੰ ਬੇਲੋੜੀ ਟਰਿੱਗਰ ਕਰ ਸਕਦਾ ਹੈ। ਅਸੀਂ ਕੋਡ ਨੂੰ ਮਾਡਿਊਲਰ ਤਰੀਕੇ ਨਾਲ ਵੀ ਬਣਾਇਆ ਹੈ, ਇਸ ਨੂੰ ਹੋਰ ਫਾਰਮਾਂ ਜਾਂ API ਅੰਤਮ ਬਿੰਦੂਆਂ ਲਈ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਬਣਾਉਂਦੇ ਹੋਏ। ਇਹ ਮਾਡਯੂਲਰ ਪਹੁੰਚ ਪ੍ਰੋਜੈਕਟਾਂ ਨੂੰ ਸਕੇਲਿੰਗ ਕਰਨ ਲਈ ਆਦਰਸ਼ ਹੈ, ਜਿੱਥੇ ਕਈ ਥਾਵਾਂ 'ਤੇ ਸਮਾਨ ਤਰਕ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇੱਕ ਵਿਹਾਰਕ ਉਦਾਹਰਣ ਵਜੋਂ, ਇੱਕ ਦ੍ਰਿਸ਼ ਬਾਰੇ ਸੋਚੋ ਜਿੱਥੇ ਇੱਕ ਉਪਭੋਗਤਾ ਲੌਗ ਇਨ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਦੇ ਪ੍ਰਮਾਣ ਪੱਤਰ ਬੈਕਐਂਡ ਵਿੱਚ ਸੁਰੱਖਿਅਤ ਰੂਪ ਨਾਲ ਭੇਜੇ ਜਾਂਦੇ ਹਨ। ਇਹਨਾਂ ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਇੱਕ ਨਿਰਵਿਘਨ ਉਪਭੋਗਤਾ ਅਨੁਭਵ, ਘੱਟੋ-ਘੱਟ ਲੇਟੈਂਸੀ, ਅਤੇ ਮਜ਼ਬੂਤ ਸੁਰੱਖਿਆ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ। 🚀
ਪ੍ਰਤੀਕਿਰਿਆ ਵਿੱਚ JSON ਡੇਟਾ ਭੇਜਣ ਵੇਲੇ ਵਿਕਲਪਾਂ ਦੀ ਬੇਨਤੀ ਨੂੰ ਕਿਵੇਂ ਬਾਈਪਾਸ ਕਰਨਾ ਹੈ
ਹੱਲ 1: CORS ਪ੍ਰੀਫਲਾਈਟ ਨੂੰ ਹੈਂਡਲ ਕਰਨ ਲਈ ਬੈਕਐਂਡ ਨੂੰ ਐਡਜਸਟ ਕਰੋ ਅਤੇ Python FastAPI ਦੀ ਵਰਤੋਂ ਕਰਕੇ JSON ਅਨੁਕੂਲਤਾ ਬਣਾਈ ਰੱਖੋ।
# Import required librariesfrom fastapi import FastAPI, Requestfrom fastapi.middleware.cors import CORSMiddleware# Initialize FastAPI appapp = FastAPI()# Configure CORS to accept requests from frontendorigins = ["http://localhost:3000"]app.add_middleware(CORSMiddleware,allow_origins=origins,allow_credentials=True,allow_methods=["*"],allow_headers=["*"])# Endpoint for receiving JSON data@app.post("/auth")async def authenticate_user(request: Request):data = await request.json()return {"message": "User authenticated", "data": data}
JSON ਦੇ ਤੌਰ 'ਤੇ ਡੇਟਾ ਭੇਜਣ ਵੇਲੇ ਵਿਕਲਪਾਂ ਦੀਆਂ ਬੇਨਤੀਆਂ ਨੂੰ ਘੱਟ ਕਰਨਾ
ਹੱਲ 2: ਸਧਾਰਨ ਸਿਰਲੇਖਾਂ ਦੇ ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਜਿੱਥੇ ਵੀ ਸੰਭਵ ਹੋਵੇ ਪ੍ਰੀਫਲਾਈਟ ਤੋਂ ਬਚੋ
// Use fetch with minimal headersconst sendData = async () => {const url = "http://localhost:8000/auth";const data = { email: "user@example.com", password: "securepassword" };// Avoid complex headersconst response = await fetch(url, {method: "POST",headers: {"Accept": "application/json",},body: JSON.stringify(data),});const result = await response.json();console.log(result);};
ਯੂਨਿਟ ਟੈਸਟਾਂ ਨਾਲ ਹੱਲ ਨੂੰ ਵਧਾਉਣਾ
ਹੱਲ 3: FastAPI TestClient ਨਾਲ ਬੈਕਐਂਡ ਐਂਡਪੁਆਇੰਟ ਦੀ ਯੂਨਿਟ ਦੀ ਜਾਂਚ ਕਰੋ
# Import FastAPI TestClientfrom fastapi.testclient import TestClientfrom main import app# Initialize test clientclient = TestClient(app)# Test POST requestdef test_authenticate_user():response = client.post("/auth", json={"email": "test@example.com", "password": "password"})assert response.status_code == 200assert response.json()["message"] == "User authenticated"
JSON ਪੋਸਟ ਬੇਨਤੀਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਫਾਈਨ-ਟਿਊਨਡ ਫਰੰਟਐਂਡ ਪਹੁੰਚ
ਹੱਲ 4: ਬੈਕਐਂਡ ਲੋੜਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨ ਲਈ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਸਿਰਲੇਖਾਂ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰੋ
// Dynamically set headers to prevent preflightconst sendAuthData = async () => {const url = "http://localhost:8000/auth";const data = { email: "user2@example.com", password: "mypassword" };// Adjust headers and request bodyconst response = await fetch(url, {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify(data),});const result = await response.json();console.log(result);};
ਬਿਨਾਂ ਵਿਕਲਪਾਂ ਦੇ ਪ੍ਰਤੀਕਿਰਿਆ ਵਿੱਚ JSON ਡੇਟਾ ਪੋਸਟ ਬੇਨਤੀਆਂ ਨੂੰ ਸੁਚਾਰੂ ਬਣਾਉਣਾ
ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਅਤੇ FastAPI ਵਰਗਾ ਬੈਕਐਂਡ, ਬੇਲੋੜੀ OPTIONS ਪ੍ਰੀਫਲਾਈਟ ਬੇਨਤੀਆਂ ਤੋਂ ਬਚਣਾ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਕਦਮ ਹੈ। ਇੱਕ ਨਜ਼ਰਅੰਦਾਜ਼ ਪਹਿਲੂ ਨਿਰਵਿਘਨ ਡੇਟਾ ਟ੍ਰਾਂਸਫਰ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਸਰਵਰ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਸੰਚਾਰ ਨੂੰ ਕੌਂਫਿਗਰ ਕਰ ਰਿਹਾ ਹੈ। OPTIONS ਬੇਨਤੀਆਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੁਆਰਾ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਸ਼ੁਰੂ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਵਿਧੀ ਜਦੋਂ ਖਾਸ ਸਿਰਲੇਖ ਜਾਂ ਵਿਧੀਆਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਸਮਝ ਕੇ ਕਿ CORS ਨੀਤੀਆਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ, ਡਿਵੈਲਪਰ ਡੇਟਾ ਇਕਸਾਰਤਾ ਅਤੇ ਸੁਰੱਖਿਆ ਨੂੰ ਕਾਇਮ ਰੱਖਦੇ ਹੋਏ ਪ੍ਰੀਫਲਾਈਟ ਬੇਨਤੀਆਂ ਨੂੰ ਘਟਾ ਸਕਦੇ ਹਨ। 🛡️
ਇੱਕ ਹੋਰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਪਹੁੰਚ ਸਧਾਰਨ ਸਿਰਲੇਖਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਡਿਫੌਲਟ ਬ੍ਰਾਊਜ਼ਰ ਵਿਵਹਾਰ ਦਾ ਲਾਭ ਉਠਾਉਣਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, 'ਸਮੱਗਰੀ-ਕਿਸਮ' ਸਿਰਲੇਖ ਨੂੰ ਛੱਡਣਾ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਇਸਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਸੈੱਟ ਕਰਨ ਦੇਣਾ ਪ੍ਰੀਫਲਾਈਟ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਬਾਈਪਾਸ ਕਰ ਸਕਦਾ ਹੈ। ਹਾਲਾਂਕਿ, ਇਸ ਲਈ ਆਉਣ ਵਾਲੇ ਡੇਟਾ ਨੂੰ ਪਾਰਸ ਕਰਨ ਲਈ ਬੈਕਐਂਡ ਲਚਕਤਾ ਦੀ ਲੋੜ ਹੈ। ਬੈਕਐਂਡ ਸੰਰਚਨਾਵਾਂ, ਜਿਵੇਂ ਕਿ JSON ਅਤੇ URL-ਏਨਕੋਡਡ ਫਾਰਮੈਟਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਪਾਰਸ ਕਰਨਾ, ਫਰੰਟਐਂਡ ਨੂੰ ਘੱਟੋ-ਘੱਟ ਸਿਰਲੇਖਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਬਿਨਾਂ ਵਾਧੂ ਬੇਨਤੀਆਂ ਦੇ ਡੇਟਾ ਪ੍ਰਵਾਹ ਨੂੰ ਸੁਚਾਰੂ ਬਣਾਉਂਦਾ ਹੈ।
ਅੰਤ ਵਿੱਚ, ਕੁਸ਼ਲਤਾ ਅਤੇ ਸੁਰੱਖਿਆ ਵਿਚਕਾਰ ਸੰਤੁਲਨ ਬਣਾਈ ਰੱਖਣਾ ਬਹੁਤ ਜ਼ਰੂਰੀ ਹੈ। ਹਾਲਾਂਕਿ OPTIONS ਬੇਨਤੀਆਂ ਨੂੰ ਘਟਾਉਣ ਨਾਲ ਕਾਰਗੁਜ਼ਾਰੀ ਵਿੱਚ ਸੁਧਾਰ ਹੁੰਦਾ ਹੈ, ਇਸ ਨੂੰ ਆਉਣ ਵਾਲੇ ਡੇਟਾ ਦੀ ਪ੍ਰਮਾਣਿਕਤਾ ਅਤੇ ਰੋਗਾਣੂ-ਮੁਕਤ ਕਰਨ ਨਾਲ ਸਮਝੌਤਾ ਨਹੀਂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਆਉਣ ਵਾਲੀਆਂ ਬੇਨਤੀਆਂ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ FastAPI ਵਿੱਚ ਇੱਕ ਮਿਡਲਵੇਅਰ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਕੋਈ ਵੀ ਖਤਰਨਾਕ ਪੇਲੋਡਾਂ 'ਤੇ ਕਾਰਵਾਈ ਨਹੀਂ ਕੀਤੀ ਜਾਂਦੀ। ਇਹਨਾਂ ਰਣਨੀਤੀਆਂ ਨੂੰ ਜੋੜ ਕੇ, ਡਿਵੈਲਪਰ ਇੱਕ ਮਜ਼ਬੂਤ ਹੱਲ ਬਣਾਉਂਦੇ ਹਨ ਜੋ ਪ੍ਰਦਰਸ਼ਨਕਾਰੀ ਅਤੇ ਸੁਰੱਖਿਅਤ ਦੋਵੇਂ ਹੁੰਦੇ ਹਨ। 🚀
- ਪ੍ਰਤੀਕ੍ਰਿਆ ਵਿੱਚ ਇੱਕ ਵਿਕਲਪ ਬੇਨਤੀ ਨੂੰ ਕੀ ਚਾਲੂ ਕਰਦਾ ਹੈ?
- OPTIONS ਬੇਨਤੀਆਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੁਆਰਾ ਇੱਕ ਪ੍ਰੀਫਲਾਈਟ ਜਾਂਚ ਵਜੋਂ ਸ਼ੁਰੂ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਜਦੋਂ ਸਿਰਲੇਖ ਪਸੰਦ ਕਰਦੇ ਹਨ ਜਾਂ ਤਰੀਕੇ ਜਿਵੇਂ ਜਾਂ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।
- ਮੈਂ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨਾਲ ਸਮਝੌਤਾ ਕੀਤੇ ਬਿਨਾਂ OPTIONS ਬੇਨਤੀਆਂ ਤੋਂ ਕਿਵੇਂ ਬਚ ਸਕਦਾ ਹਾਂ?
- CORS ਪ੍ਰੀਫਲਾਈਟ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਨ ਤੋਂ ਬਚਣ ਲਈ ਡਿਫੌਲਟ ਬ੍ਰਾਊਜ਼ਰ-ਸੈੱਟ ਹੈਡਰ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਾਂ ਸਿਰਲੇਖਾਂ ਨੂੰ ਸਰਲ ਬਣਾਓ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਬੈਕਐਂਡ ਇਹਨਾਂ ਸੰਰਚਨਾਵਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ।
- FastAPI URL-ਏਨਕੋਡ ਕੀਤੇ ਸਿਰਲੇਖਾਂ ਨਾਲ ਭੇਜੇ ਗਏ ਡੇਟਾ ਨੂੰ ਕਿਉਂ ਰੱਦ ਕਰਦਾ ਹੈ?
- FastAPI ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ JSON ਪੇਲੋਡ ਦੀ ਉਮੀਦ ਕਰਦਾ ਹੈ, ਇਸਲਈ ਇਹ ਭੇਜੇ ਗਏ ਡੇਟਾ ਨੂੰ ਪਾਰਸ ਨਹੀਂ ਕਰ ਸਕਦਾ ਹੈ ਵਾਧੂ ਪਾਰਸਰਾਂ ਤੋਂ ਬਿਨਾਂ।
- ਕੀ ਪ੍ਰੀਫਲਾਈਟ ਬੇਨਤੀਆਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਾਈਪਾਸ ਕਰਨਾ ਸੁਰੱਖਿਅਤ ਹੈ?
- ਪ੍ਰੀਫਲਾਈਟ ਬੇਨਤੀਆਂ ਨੂੰ ਬਾਈਪਾਸ ਕਰਨਾ ਸੁਰੱਖਿਅਤ ਹੈ ਜੇਕਰ ਬੈਕਐਂਡ 'ਤੇ ਸਹੀ ਇਨਪੁਟ ਪ੍ਰਮਾਣਿਕਤਾ ਅਤੇ ਸੈਨੀਟਾਈਜ਼ੇਸ਼ਨ ਲਾਗੂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਤਸਦੀਕ ਕੀਤੇ ਬਿਨਾਂ ਪ੍ਰਾਪਤ ਕੀਤੇ ਡੇਟਾ 'ਤੇ ਕਦੇ ਭਰੋਸਾ ਨਾ ਕਰੋ।
- CORS ਨੂੰ ਇਜਾਜ਼ਤ ਦੇਣ ਨਾਲ OPTIONS ਗਲਤੀਆਂ ਨੂੰ ਹੱਲ ਕਰਨ ਵਿੱਚ ਕਿਵੇਂ ਮਦਦ ਮਿਲਦੀ ਹੈ?
- ਸੰਰਚਨਾ FastAPI ਵਿੱਚ ਖਾਸ ਮੂਲ, ਵਿਧੀਆਂ, ਅਤੇ ਸਿਰਲੇਖਾਂ ਦੀ ਆਗਿਆ ਦੇਣ ਲਈ ਸਰਵਰ ਨੂੰ ਬਿਨਾਂ ਕਿਸੇ ਸਮੱਸਿਆ ਦੇ ਬੇਨਤੀਆਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ।
React ਵਿੱਚ POST ਬੇਨਤੀਆਂ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਵਿੱਚ ਸਿਰਲੇਖਾਂ ਦੀ ਸੰਰਚਨਾ ਕਰਨਾ ਅਤੇ ਇੱਕ ਬੈਕਐਂਡ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ ਜੋ ਡਾਇਨਾਮਿਕ ਡੇਟਾ ਫਾਰਮੈਟਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ। ਬੇਲੋੜੀਆਂ OPTIONS ਬੇਨਤੀਆਂ ਨੂੰ ਘਟਾ ਕੇ, ਅਸੀਂ ਸਹੀ ਪ੍ਰਮਾਣਿਕਤਾ ਦੁਆਰਾ ਸੁਰੱਖਿਆ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋਏ ਗਤੀ ਅਤੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੇ ਹਾਂ।
FastAPI ਅਤੇ ਫੈਚ ਵਿੱਚ ਵਿਹਾਰਕ ਸੰਰਚਨਾਵਾਂ ਦੁਆਰਾ, ਸਹਿਜ ਸੰਚਾਰ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਵਿਧੀਆਂ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਸੁਰੱਖਿਅਤ, ਕੁਸ਼ਲ ਡੇਟਾ ਸੰਚਾਰ ਲਈ ਇੱਕ ਬੁਨਿਆਦ ਬਣਾਉਂਦੀਆਂ ਹਨ, ਜਿਸ ਨਾਲ ਡਿਵੈਲਪਰਾਂ ਅਤੇ ਅੰਤਮ ਉਪਭੋਗਤਾਵਾਂ ਦੋਵਾਂ ਨੂੰ ਲਾਭ ਹੁੰਦਾ ਹੈ। 🔐
- FastAPI ਵਿੱਚ CORS ਨੂੰ ਹੈਂਡਲ ਕਰਨ ਅਤੇ ਇਸਦੀ ਮਿਡਲਵੇਅਰ ਸੰਰਚਨਾ ਬਾਰੇ ਵਿਸਤ੍ਰਿਤ। ਸਰੋਤ: FastAPI CORS ਦਸਤਾਵੇਜ਼ .
- POST ਬੇਨਤੀਆਂ ਲਈ React fetch API ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਬਾਰੇ ਸੂਝ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਸਰੋਤ: MDN ਵੈੱਬ ਡੌਕਸ: ਪ੍ਰਾਪਤ ਕਰਨਾ .
- CORS ਵਿੱਚ OPTIONS ਪ੍ਰੀਫਲਾਈਟ ਬੇਨਤੀਆਂ ਦੇ ਮਕੈਨਿਕਸ ਦੀ ਵਿਆਖਿਆ ਕਰਦਾ ਹੈ। ਸਰੋਤ: MDN ਵੈੱਬ ਡੌਕਸ: CORS ਪ੍ਰੀਫਲਾਈਟ .
- ਗਤੀਸ਼ੀਲ ਸਿਰਲੇਖਾਂ ਨੂੰ ਸੰਭਾਲਦੇ ਹੋਏ ਬੈਕਐਂਡ ਅੰਤਮ ਬਿੰਦੂਆਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਨ ਲਈ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਪੇਸ਼ ਕਰਦਾ ਹੈ। ਸਰੋਤ: OWASP: CORS ਸੁਰੱਖਿਆ .
- ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ JSON ਡੇਟਾ ਨੂੰ ਸੰਭਾਲਣ ਦੇ ਵਧੀਆ ਅਭਿਆਸਾਂ ਦੀ ਚਰਚਾ ਕਰਦਾ ਹੈ। ਸਰੋਤ: JSON ਸਰਕਾਰੀ ਸਾਈਟ .