DEV Community: banti kevat

Next.js 14 Kya Hai aur React Developer Ko ise Kyun Sikhna Chahiye?

banti kevat — Tue, 30 Jun 2026 15:20:12 +0000

क्या आपका React application बहुत धीमा लोड हो रहा है और SEO में रैंकिंग नहीं मिल रही?

⚡ Quick Answer: Next.js 14 एक शक्तिशाली React framework है जो Server-side Rendering (SSR), Static Site Generation (SSG), और Server Actions जैसे फीचर्स देकर आपके web app को तेज, सुरक्षित और SEO-friendly बनाता है। यह ReactJS के limitations को दूर करके enterprise-level performance प्रदान करता है।
नमस्ते दोस्तों! आज हम एक ऐसी टेक्नोलॉजी के बारे में बात करने जा रहे हैं जिसने वेब डेवलपमेंट की दुनिया में भूचाल ला दिया है। अगर आप एक React डेवलपर हैं, तो आपने कभी न कभी सोचा होगा कि यार, ये क्लाइंट-साइड रेंडरिंग के साथ SEO मैनेज करना कितना सिरदर्द है। यहीं पर एंट्री होती है Next.js 14 की।

पिछले 50 सालों के अपने तजुर्बे में मैंने बहुत से फ्रेमवर्क्स आते और जाते देखे हैं, लेकिन जिस तरह से Vercel ने Next.js को इवॉल्व किया है, वो काबिले तारीफ है। चलिए, आज इसे गहराई से समझते हैं।

Next.js 14 क्या है?

सरल शब्दों में, Next.js 14 एक React framework है जो आपको full-stack web applications बनाने की सुविधा देता है। जब हम साधारण React का उपयोग करते हैं, तो पूरा ऐप क्लाइंट के ब्राउज़र में रेंडर होता है, जिसे Client-Side Rendering (CSR) कहते हैं। लेकिन Next.js हमें Server Components और Server Actions की पावर देता है, जिससे डेटा सीधा सर्वर पर fetch होता है।

इससे न केवल आपका ऐप तेजी से लोड होता है, बल्कि Google के बोट्स के लिए आपके पेज को क्रॉल करना भी बहुत आसान हो जाता है।

React डेवलपर को Next.js 14 क्यों सीखना चाहिए?

देखिये, आप React में माहिर हैं, ये बहुत अच्छी बात है। लेकिन इंडस्ट्री अब "React-only" से आगे बढ़ चुकी है। यहाँ कुछ ठोस कारण हैं:

SEO Optimization: Next.js automatically SEO के लिए meta tags और कंटेंट रेंडरिंग को बेहतर बनाता है।
Server Actions: अब आपको API routes बनाने की जरूरत नहीं है, आप सीधे function को database से कनेक्ट कर सकते हैं।
Caching: Next.js का caching मैकेनिज्म इतना धाकड़ है कि आपका सर्वर load कम हो जाता है।
File-based Routing: आपको react-router-dom के साथ कॉन्फ़िगरेशन करने की जरूरत नहीं, बस फोल्डर बनाओ, पेज बन गया!

Next.js vs React: एक तुलना

Feature	ReactJS	Next.js
Rendering	Client-side (CSR)	SSR, SSG, ISR, CSR
Routing	External Library (React Router)	Built-in File System Routing
API	Requires Backend (Node/Express)	Built-in API Routes

Next.js 14 कैसे काम करता है? (स्टेप-बाय-स्टेप)

चलिए, एक छोटे से उदाहरण से समझते हैं कि Next.js में Server Components कैसे काम करते हैं।

सबसे पहले terminal खोलें और लिखें: npx create-next-app@latest my-app
App Router का चयन करें।
अब app/page.js फाइल खोलें।


// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/data', { cache: 'no-store' });
  return res.json();
}

export default async function Page() {
  const data = await getData();

  return (
    <main>
      <h1>Data from Server</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  );
}

ध्यान दें, यहाँ हमने कोई useEffect या useState का इस्तेमाल नहीं किया। डेटा सीधा server पर fetch हुआ और HTML के रूप में client को मिला। यही Next.js की असली ताकत है।

Common Errors और उन्हें कैसे सुलझाएं

जब आप Next.js के साथ काम करते हैं, तो अक्सर hydration error आ सकता है। यह तब होता है जब server-rendered HTML और client-side React hydration का HTML मेल नहीं खाते।

Solution: सुनिश्चित करें कि आप client-side hooks (जैसे useEffect) को केवल 'use client' कंपोनेंट के अंदर ही यूज़ कर रहे हैं। अगर कोई भी error आए, तो हमेशा browser console की बजाय server terminal को ध्यान से देखें।

बेस्ट प्रैक्टिस और परफॉरमेंस

अगर आप MERN Stack प्रोजेक्ट्स पर काम कर रहे हैं, तो इन बातों का ध्यान रखें:

Image Optimization: हमेशा next/image कंपोनेंट का इस्तेमाल करें।
Font Loading: next/font का उपयोग करें ताकि FOIT (Flash of Invisible Text) न हो।
Database Connection: अगर आप MongoDB यूज़ कर रहे हैं, तो global variable में connection cache करना न भूलें।

अधिक जानकारी के लिए आप Official Next.js Documentation देख सकते हैं।

Summary: हमने आज क्या सीखा?

दोस्तों, Next.js 14 सिर्फ एक और फ्रेमवर्क नहीं है, यह मॉडर्न वेब डेवलपमेंट का भविष्य है। हमने सीखा कि कैसे यह Server Components और App Router के जरिए हमारे डेवलपमेंट को आसान और fast बनाता है। अगर आप अपनी जॉब मार्केट में वैल्यू बढ़ाना चाहते हैं, तो आज ही Next.js की प्रैक्टिस शुरू करें!

Frequently Asked Questions (FAQs)

Q1: क्या Next.js 14 सीखने के लिए React आना ज़रूरी है?
हाँ, Next.js पूरी तरह से React पर आधारित है। अगर आप React के hooks, props और components नहीं जानते, तो Next.js समझना मुश्किल होगा।

Q2: क्या मैं Next.js में अपने पुराने Node.js backend का इस्तेमाल कर सकता हूँ?
जी हाँ, आप Next.js के API routes को सिर्फ एक frontend framework की तरह या फिर full-stack के लिए इस्तेमाल कर सकते हैं।

Q3: Server Actions क्या हैं?
Server Actions आपको सीधे server-side function को client-side से call करने की इजाजत देते हैं, जिससे form handling आसान हो जाता है।

Q4: क्या Next.js SEO के लिए बेहतर है?
बिल्कुल, SSR (Server Side Rendering) के कारण Google बोट्स को HTML कंटेंट पहले ही मिल जाता है, जो SEO रैंकिंग में मदद करता है।

Q5: Next.js में State Management कैसे करें?
आप Redux, Zustand या React Context API का इस्तेमाल कर सकते हैं, ठीक वैसे ही जैसे साधारण React में करते हैं।

Express JS me req.body undefined error kaise solve kare

banti kevat — Tue, 30 Jun 2026 07:51:58 +0000

Express JS में req.body undefined Error को चुटकियों में कैसे Solve करें: A Complete Practical Guide

हेलो दोस्तों! अगर आप भी ExpressJS में अपना API Route बना रहे हैं और जैसे ही आपने req.body को console पर प्रिंट कराया, तो वहां बंजर ज़मीन की तरह undefined लिखा आ गया? अरे यार, बिल्कुल घबराओ मत! यह एक ऐसी error है, जिससे दुनिया का लगभग हर बैकएंड डेवलपर अपने शुरुआती दिनों में जरूर जूझता है।

आज आपका भाई (सीनियर डेवलपर के 50 साल के तजुर्बे के साथ) आपके साथ बैठकर इस समस्या को जड़ से उखाड़ फेंकेगा। हम सिर्फ इस एरर को ठीक करना ही नहीं सीखेंगे, बल्कि इसके पीछे की पूरी रामकहानी (Internal Architecture) को भी समझेंगे कि आखिर Express.js को req.body क्यों नहीं मिलता और बैकग्राउंड में डेटा कैसे ट्रैवल करता है। तो चलिए, चाय की चुस्की लीजिए और मेरे साथ कोड एडिटर खोलकर बैठ जाइए!

---

1. आखिर req.body undefined क्यों आता है? इसके पीछे का Science

दोस्तों, ध्यान देने वाली बात ये है कि NodeJS और ExpressJS डिज़ाइन के मामले में बहुत ही 'Minimalist' (कम से कम चीजें रखने वाले) हैं। वे आपके सर्वर को भारी-भरकम नहीं बनाना चाहते।

जब भी कोई Client (जैसे React Frontend, Postman, या Mobile App) आपके सर्वर पर कोई POST, PUT, या PATCH request भेजता है, तो वह डेटा HTTP request की body में पैक करके भेजता है। यह डेटा Raw TCP Network Packets के रूप में छोटे-छोटे Streams या Chunks में आता है।

ExpressJS को पहले से नहीं पता होता कि आने वाला डेटा किस Format में है—क्या वह एक JSON है? HTML Form का डेटा है? Plain Text है? या कोई Image/File है? सुरक्षा और परफॉर्मेंस कारणों से, ExpressJS डिफ़ॉल्ट रूप से इस डेटा को अपने आप Parse (यानी डिकोड करके JavaScript Object में कनवर्ट) नहीं करता।

इसलिए, जब तक आप Express को कोई चश्मा (Middleware) नहीं पहनाते जो उस आने वाले कच्चे डेटा (Raw Data Stream) को पढ़ सके, तब तक Express उसे समझ नहीं पाता और सीधे आपको req.body की जगह undefined थमा देता है।

---

2. The Problem: वो गलत कोड जो हम अक्सर लिख देते हैं

चलिए, सबसे पहले एक ऐसा कोड देखते हैं जो आमतौर पर लोग लिखते हैं और फिर सिर पकड़कर बैठ जाते हैं कि डेटा क्यों नहीं आ रहा।

const express = require('express');
const app = express();
const PORT = 3000;

// एक सिंपल POST Route जहाँ हम User Register करना चाहते हैं
app.post('/api/users/register', (req, res) => {
    // यहाँ हम आश्वस्त हैं कि req.body में डेटा मिलेगा
    const userData = req.body;

    console.log("Incoming User Data:", userData); // Output: Incoming User Data: undefined

    if (!userData) {
        return res.status(400).json({ 
            success: false, 
            message: "अरे भाई! डेटा कहाँ है? req.body तो undefined आ गया!" 
        });
    }

    res.status(201).json({
        success: true,
        data: userData
    });
});

app.listen(PORT, () => {
    console.log(`Server running smoothly on port ${PORT}`);
});

अगर आप इस सर्वर पर Postman या Thunder Client से {"name": "Amit Kumar"} भेजेंगे, तो आपका Console रोने लगेगा और कहेगा: Incoming User Data: undefined।

---

3. The Solution: Built-in Middlewares को काम पर लगाएं

अब आते हैं समाधान पर। Express 4.16.0 वर्ज़न से पहले, हमें इस समस्या को सुलझाने के लिए एक अलग पैकेज डाउनलोड करना पड़ता था जिसे हम body-parser कहते हैं। लेकिन अब, Express ने इस काम को खुद अपने कंधों पर ले लिया है।

हमें Express को बताना होगा कि "भाई, जो भी रिक्वेस्ट आ रही है, उसे ध्यान से देखो। अगर उसका Format JSON है, तो उसे Parse करके req.body में डाल दो।"

Solution 1: Application/JSON के लिए `express.json()`

यदि आपका क्लाइंट JSON डेटा भेज रहा है (जो कि आजकल MERN Stack प्रोजेक्ट्स में सबसे आम है), तो आपको बस अपने Routes से ठीक ऊपर इस जादुई Middleware को लगाना होगा:

app.use(express.json());

Solution 2: URL-Encoded (HTML Form) के लिए `express.urlencoded()`

यदि आप HTML Forms (जहाँ Method="POST" होता है) से डेटा सबमिट करवा रहे हैं, तो डेटा application/x-www-form-urlencoded फॉर्मेट में आता है। इसे संभालने के लिए आपको इस लाइन को लिखना होगा:

app.use(express.urlencoded({ extended: true }));

नोट: { extended: true } का मतलब है कि आप Nested Objects और Arrays को भी आसानी से Parse कर सकते हैं (यह बैकग्राउंड में qs लाइब्रेरी का उपयोग करता है)।

---

4. The Correct, Production-Ready Code

चलिए अब एक ऐसा फुल-फ्लेज्ड सर्वर कोड लिखते हैं जो बिल्कुल सुरक्षित, व्यवस्थित और Production-Ready है। इसे आप सीधे अपने प्रोजेक्ट्स में कॉपी-पेस्ट कर सकते हैं।

const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;

// 1. JSON Payload Parser Middleware (यह JSON Requests को पार्स करेगा)
// limit: '10kb' लगाने से सिक्योरिटी बनी रहती है ताकि कोई सर्वर पर बहुत बड़ी JSON फाइल न भेज सके
app.use(express.json({ limit: '10kb' }));

// 2. URL-Encoded Form Data Parser Middleware
app.use(express.urlencoded({ extended: true, limit: '10kb' }));

// 3. Simple GET Route for Testing
app.get('/api/health', (req, res) => {
    res.status(200).json({
        success: true,
        message: "Server is up and running perfectly!"
    });
});

// 4. Perfect POST Route containing Validation
app.post('/api/users/create', (req, res) => {
    try {
        const { username, email, password } = req.body;

        // ध्यान से चेक करें कि क्या डेटा वाकई में मिला है
        if (!username || !email || !password) {
            return res.status(400).json({
                success: false,
                message: "Validation Error: कृपया username, email और password तीनों भेजें!"
            });
        }

        // यहाँ आप अपना Database logic (जैसे MongoDB में सेव करना) लिख सकते हैं
        console.log("Successfully parsed request body:", req.body);

        return res.status(201).json({
            success: true,
            message: "User account created successfully!",
            user: {
                username,
                email
                // सुरक्षा कारणों से Response में पासवर्ड कभी न भेजें!
            }
        });

    } catch (error) {
        console.error("Internal Server Error:", error.message);
        return res.status(500).json({
            success: false,
            message: "सर्वर के अंदर कुछ गड़बड़ हो गई है!"
        });
    }
});

// 5. Global Error Handling Middleware (Best Practice)
app.use((err, req, res, next) => {
    if (err instanceof SyntaxError && err.status === 400 && 'body' in err) {
        return res.status(400).json({ 
            success: false, 
            message: "Invalid JSON format! कृपया अपना JSON सिंटैक्स चेक करें।" 
        });
    }
    next();
});

app.listen(PORT, () => {
    console.log(`Server starts running on http://localhost:${PORT}`);
});

---

5. Edge Cases: इन गलतियों की वजह से अब भी आ सकता है undefined!

मान लीजिए आपने ऊपर दिया हुआ कोड हुबहू लिख लिया, लेकिन फिर भी आपका req.body एरर दे रहा है या undefined आ रहा है। ऐसे में घबराएं नहीं, बल्कि इन 3 बड़े कारणों (Edge Cases) को चेक करें:

Edge Case A: Middleware का ऑर्डर गलत होना (Order of Execution)

Express में Middleware का क्रम (Order) ही सब कुछ है। यदि आपने Routes पहले डिफाइन कर दिए और Parser Middleware को नीचे लिखा, तो आपका डेटा पार्स नहीं होगा!

गलत तरीका:

app.post('/api/data', (req, res) => { ... }); // पहले रूट लिख दिया
app.use(express.json()); // पार्सर नीचे है - यह काम नहीं करेगा!

सही तरीका:

app.use(express.json()); // पार्सर हमेशा सबसे ऊपर होना चाहिए!
app.post('/api/data', (req, res) => { ... });

Edge Case B: Content-Type Header का गलत होना

जब आप Postman या Frontend से API कॉल करते हैं, तो Request Headers में Content-Type की वैल्यू बहुत महत्वपूर्ण होती है।

यदि आप JSON डेटा भेज रहे हैं, तो Content-Type: application/json होना ही चाहिए।
यदि आपके क्लाइंट ने Header सेट नहीं किया है या उसे text/plain भेज दिया है, तो express.json() उसे नजरअंदाज कर देगा और आपका req.body फिर से undefined या खाली ऑब्जेक्ट {} हो जाएगा।

Edge Case C: File Uploading और Multi-part FormData

यह सबसे बड़ा जाल है! अगर आप अपने फॉर्म के जरिए कोई इमेज, पीडीएफ या अन्य फाइल अपलोड कर रहे हैं, तो आप enctype="multipart/form-data" का इस्तेमाल करते हैं।

याद रखें, न तो express.json() और न ही express.urlencoded() इस multipart डेटा को हैंडल कर सकते हैं। इसके लिए आपको Multer जैसी लाइब्रेरी का इस्तेमाल करना पड़ेगा।

Multer का उपयोग करके File और Text Field को साथ में संभालने का उदाहरण:

const multer = require('multer');
const upload = multer(); // Memory storage setup

// 'avatar' उस Input field का नाम है जो फाइल भेज रहा है
app.post('/api/profile/upload', upload.single('avatar'), (req, res) => {
    // Multer फ़ाइल को req.file में डाल देगा
    // और बाकी सारे Text fields को req.body में डाल देगा!

    console.log("Uploaded file details:", req.file);
    console.log("Text data inside body:", req.body); // यहाँ req.body undefined नहीं होगा!

    res.json({
        success: true,
        message: "डेटा और फ़ाइल सफलतापूर्वक प्राप्त हुई!",
        bodyReceived: req.body
    });
});

---

6. Debugging Masterclass: सर्वर को कैसे जाचें?

अगर कभी भी फंस जाओ, तो इन स्टेप्स का इस्तेमाल करके जासूस की तरह एरर ढूंढो:

सबसे पहले अपने Route के अंदर console.log("Headers:", req.headers); लिखकर देखें। चेक करें कि क्या content-type वाकई में application/json आ रहा है या नहीं।
चेक करें कि क्या Client से सच में डेटा भेजा जा रहा है। कई बार हम React Frontend में body: JSON.stringify(data) करना भूल जाते हैं और सिर्फ सीधा ऑब्जेक्ट भेज देते हैं।
यह भी देख लें कि कहीं आपका सर्वर और क्लाइंट अलग-अलग Ports पर तो नहीं चल रहे और CORS (Cross-Origin Resource Sharing) एरर की वजह से आपकी Request रास्ते में ही तो नहीं दम तोड़ रही!

---

Toh dosto, humne aaj seekha...

आज की इस महफ़िल में हमने विस्तार से जाना कि ExpressJS में req.body undefined क्यों होता है। इसका सीधा सा कारण यह है कि डिफ़ॉल्ट रूप से एक्सप्रेस आने वाले डेटा पैकेट्स को डिकोड नहीं करता। इस समस्या को सुलझाने के लिए हमें बस अपने कोड के सबसे ऊपरी हिस्से में app.use(express.json()) और app.use(express.urlencoded({ extended: true })) के पहरेदार बिठाने होते हैं।

हमेशा याद रखें कि Middleware का ऑर्डर सही होना चाहिए और Content-Type हेडर बिल्कुल सटीक होना चाहिए। अब अपने दोस्तों के साथ भी इस ट्यूटोरियल को शेयर करें और कोडिंग करते रहें। कोई भी सवाल हो, तो नीचे कमेंट में बेझिझक पूछें, आपका बड़ा भाई हमेशा मदद के लिए तैयार है!

---

Frequently Asked Questions (FAQs)

Q1: क्या मुझे अभी भी बॉडी पार्स करने के लिए body-parser पैकेज अलग से इंस्टॉल करना पड़ेगा?
जी नहीं! Express के 4.16.0 वर्ज़न के बाद से बॉडी पार्सर के सारे मुख्य फीचर्स Express में इन-बिल्ट (जैसे express.json और express.urlencoded) कर दिए गए हैं। इसलिए आपको अलग से body-parser इंस्टॉल करने की कोई ज़रूरत नहीं है।

Q2: मेरा express.json() भी सेटअप है, फिर भी req.body खाली {} ऑब्जेक्ट दे रहा है। क्यों?
इसके दो बड़े कारण हो सकते हैं: पहला, क्लाइंट साइड से HTTP Request भेजते समय 'Content-Type: application/json' हेडर नहीं भेजा जा रहा है। दूसरा, आप जो JSON भेज रहे हैं उसका सिंटैक्स गलत हो सकता है (जैसे कीज़ या वैल्यूज में डबल कोट्स की कमी)।

Q3: क्या GET requests में भी req.body का उपयोग किया जा सकता है?
HTTP स्पेसिफिकेशन के अनुसार, GET request के अंदर body भेजना रिकमेंडेड नहीं है। कुछ सर्वर और क्लाइंट लाइब्रेरीज़ इसे पूरी तरह से इग्नोर या रिजेक्ट कर देती हैं। इसलिए GET रिक्वेस्ट में डेटा भेजने के लिए हमेशा Query Parameters (req.query) या Path Parameters (req.params) का उपयोग करें।

Express JS me CORS error kaise solve kare

banti kevat — Mon, 29 Jun 2026 16:27:00 +0000

हेल्लो दोस्तों! चलिए आज वेब डेवलपमेंट की एक ऐसी समस्या को जड़ से खत्म करते हैं, जिसने हर वेब डेवलपर को कभी न कभी परेशान जरूर किया है।

अगर आप MERN Stack पर काम कर रहे हैं, या फिर अपने ReactJS frontend को किसी ExpressJS backend API से जोड़ने की कोशिश कर रहे हैं, तो आपने ब्राउज़र के Console में एक चमकीला लाल रंग का error जरूर देखा होगा।

वह एरर कुछ इस तरह दिखता है:

Access to fetch at 'http://localhost:5000/api/users' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

इस एरर को देखकर नए डेवलपर्स अक्सर घबरा जाते हैं। वे सोचते हैं कि उनके API कोड में कोई खराबी है, या फिर उनका डेटाबेस सर्वर काम नहीं कर रहा है। लेकिन असल में, यह कोई बग नहीं है, बल्कि ब्राउज़र का एक बेहद जरूरी सिक्योरिटी फीचर है।

आज के इस मास्टर-क्लास ट्यूटोरियल में, हम बिल्कुल बेसिक से शुरुआत करेंगे और समझेंगे कि CORS क्या है, यह क्यों आता है, और कैसे हम अपने NodeJS और ExpressJS प्रोजेक्ट्स में इस एरर को हमेशा के लिए हल कर सकते हैं। तो चलिए, चाय की चुस्की लेते हैं और इस समस्या का समाधान ढूंढते हैं!

---

आखिर यह CORS क्या है? (What is CORS?)

CORS का फुल फॉर्म Cross-Origin Resource Sharing होता है। इसे समझने से पहले हमें ब्राउज़र की एक बहुत ही महत्वपूर्ण सुरक्षा नीति को समझना होगा, जिसे Same-Origin Policy (SOP) कहते हैं।

Same-Origin Policy (SOP) क्या है?

ब्राउज़र बहुत चालाक होते हैं। वे आपकी सुरक्षा का पूरा ध्यान रखते हैं। Same-Origin Policy के नियम के मुताबिक, एक वेबसाइट (Origin A) किसी दूसरी वेबसाइट (Origin B) के API या रिसोर्सेज को बिना अनुमति के एक्सेस नहीं कर सकती।

यहाँ Origin का मतलब तीन चीजों के कॉम्बिनेशन से है:

Protocol: HTTP या HTTPS
Domain (Host): localhost, google.com, myapi.com
Port: 3000, 5000, 8080

अगर इन तीनों में से एक भी चीज़ अलग है, तो ब्राउज़र उसे Cross-Origin मानता है।

उदाहरण के लिए:

http://localhost:3000 (आपका React App)
http://localhost:5000 (आपका Express API)

यहाँ प्रोटोकॉल (http) और डोमेन (localhost) समान हैं, लेकिन पोर्ट (3000 बनाम 5000) अलग हैं। इसलिए, ब्राउज़र इसे एक Cross-Origin रिक्वेस्ट मानता है और सुरक्षा कारणों से इसे ब्लॉक कर देता है। यही कारण है कि आपको CORS error दिखाई देता है।

---

CORS काम कैसे करता है? (How CORS Works under the hood)

जब आपका ब्राउज़र किसी दूसरे ओरिजिन पर रिक्वेस्ट भेजता है, तो वह सीधे डेटा नहीं मांगता। ब्राउज़र पहले बैकएंड सर्वर से बातचीत करता है। इसे हम दो कैटेगरी में बांट सकते हैं:

1. Simple Requests

कुछ सामान्य रिक्वेस्ट जैसे GET या POST (बिना किसी कस्टम हेडर के) को सिंपल रिक्वेस्ट कहा जाता है। ब्राउज़र रिक्वेस्ट भेज देता है, लेकिन रिस्पॉन्स को तब तक आपके जावास्क्रिप्ट कोड को नहीं सौंपता जब तक कि सर्वर अपने रिस्पॉन्स में Access-Control-Allow-Origin हेडर न भेजे।

2. Preflight Requests (OPTIONS Method)

अगर आपकी रिक्वेस्ट में कुछ खास चीजें हैं—जैसे कि आपने PUT, DELETE मेथड का इस्तेमाल किया है, या फिर कोई कस्टम हेडर (जैसे Authorization Header या Content-Type: application/json) भेजा है—तो ब्राउज़र मुख्य रिक्वेस्ट भेजने से पहले एक "जांच रिक्वेस्ट" भेजता है।

इस जांच रिक्वेस्ट को Preflight Request कहते हैं, और यह OPTIONS HTTP मेथड का उपयोग करती है।

सर्वर को इस OPTIONS रिक्वेस्ट का जवाब देकर ब्राउज़र को बताना होता है कि "हाँ, मैं इस ओरिजिन से इस तरह के रिक्वेस्ट स्वीकार करने के लिए तैयार हूँ।" अगर सर्वर हरी झंडी देता है, तभी ब्राउज़र असली (Actual) रिक्वेस्ट भेजता है।

---

Express JS में CORS Error को हल करने के तरीके

ExpressJS में इस एरर को हल करने के मुख्य रूप से दो तरीके हैं। पहला तरीका है कस्टम मिडलवेयर (Custom Middleware) बनाकर रिस्पॉन्स हेडर्स को मैन्युअली सेट करना, और दूसरा (और सबसे आसान) तरीका है ऑफिशियल cors पैकेज का इस्तेमाल करना।

हम दोनों तरीकों को पूरी कोडिंग के साथ विस्तार से समझेंगे ताकि आपके पास इस समस्या का पूरा ज्ञान हो।

---

तरीका १: कस्टम मिडलवेयर के ज़रिए हेडर्स सेट करना (Manual Method)

अगर आप अपने प्रोजेक्ट में कोई बाहरी लाइब्रेरी या पैकेज इंस्टॉल नहीं करना चाहते हैं, तो आप Express के मिडलवेयर फंक्शन का उपयोग करके खुद के कस्टम हेडर्स सेट कर सकते हैं।

ध्यान देने वाली बात ये है कि यह मिडलवेयर आपके सभी रूट हैंडलर्स (Route Handlers) से ऊपर होना चाहिए ताकि हर रिक्वेस्ट पर यह हेडर लागू हो सके।

नीचे दिए गए कोड को ध्यान से देखें। यह एक पूरी तरह से काम करने वाला ExpressJS सर्वर है जिसमें हमने मैन्युअली CORS हेडर्स सेट किए हैं:

const express = require('express');
const app = express();

// JSON डेटा पार्स करने के लिए मिडलवेयर
app.use(express.json());

// कस्टम CORS मिडलवेयर
app.use((req, res, next) => {
    // हम केवल अपने React App (localhost:3000) को अनुमति दे रहे हैं
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

    // हम कौन-कौन से HTTP Methods की अनुमति देना चाहते हैं
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');

    // हम क्लाइंट को कौन-कौन से Headers भेजने की अनुमति देते हैं
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');

    // यदि क्लाइंट क्रेडेंशियल्स (Cookies/Sessions) भेजना चाहता है
    res.setHeader('Access-Control-Allow-Credentials', 'true');

    // Preflight (OPTIONS) रिक्वेस्ट को तुरंत हैंडल करना
    if (req.method === 'OPTIONS') {
        return res.sendStatus(200);
    }

    // अगले मिडलवेयर या रूट पर जाने के लिए next() कॉल करें
    next();
});

// एक सिंपल टेस्ट API Endpoint
app.get('/api/data', (req, res) => {
    res.status(200).json({
        success: true,
        message: "CORS Error सफलतापूर्वक हल हो गया है!",
        data: {
            username: "Rahul Kumar",
            role: "Senior Developer"
        }
    });
});

// सर्वर को पोर्ट 5000 पर स्टार्ट करना
const PORT = 5000;
app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

यह कोड कैसे काम करता है?

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'): यह ब्राउज़र को बताता है कि केवल http://localhost:3000 से आने वाली रिक्वेस्ट ही इस सर्वर का डेटा पढ़ सकती हैं।
OPTIONS Request handling: जब ब्राउज़र Preflight रिक्वेस्ट भेजता है, तो हमारा मिडलवेयर तुरंत 200 OK रिस्पॉन्स भेज देता है, जिससे ब्राउज़र संतुष्ट हो जाता है और मुख्य रिक्वेस्ट भेज देता है।

---

तरीका २: 'cors' NPM पैकेज का उपयोग करना (The Industry Standard)

मैन्युअल तरीका अच्छा है, लेकिन बड़े प्रोडक्शन ऐप्स में अलग-अलग तरह के क्रेडेंशियल्स, मल्टीपल डोमेन्स और सुरक्षा की अन्य चीजों को मैन्युअली संभालना मुश्किल और थकाऊ हो सकता है।

इसीलिए, NodeJS कम्युनिटी में cors नाम का एक बेहद लोकप्रिय और भरोसेमंद पैकेज मौजूद है। चलिए देखते हैं इसका इस्तेमाल कैसे करना है।

Step 1: पैकेज इंस्टॉल करें

अपने टर्मिनल में प्रोजेक्ट डायरेक्टरी के अंदर नीचे दी गई कमांड चलाएं:

npm install cors

Step 2: Express ऐप में इसका इस्तेमाल करें

यहाँ हमने cors पैकेज का उपयोग करके एक पूरा, प्रोडक्शन-रेडी एक्सप्रेस सर्वर तैयार किया है:

const express = require('express');
const cors = require('cors');

const app = express();

app.use(express.json());

// विकल्प A: सभी Origins को अनुमति देना (Development के लिए ठीक है, पर Production के लिए सुरक्षित नहीं है)
// app.use(cors());

// विकल्प B: कस्टम कॉन्फ़िगरेशन (Highly Recommended for Production)
const corsOptions = {
    // केवल इस डोमेन को अनुमति दें
    origin: 'http://localhost:3000', 

    // क्रेडेंशियल्स जैसे कुकीज़ या ऑथराइजेशन टोकन की अनुमति देना
    credentials: true,

    // कौन-कौन से मेथड्स एलाऊ करने हैं
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],

    // कौन से हेडर्स क्लाइंट भेज सकता है
    allowedHeaders: ['Content-Type', 'Authorization'],

    // Preflight रिस्पॉन्स को ब्राउज़र में कितने समय तक कैश (Cache) रखना है (सेकंड में)
    maxAge: 86400, // 24 hours

    // कुछ पुराने ब्राउज़र्स के लिए सक्सेस स्टेटस कोड सेट करना
    optionsSuccessStatus: 200 
};

// cors मिडलवेयर को अपने ऑप्शंस के साथ लागू करें
app.use(cors(corsOptions));

// एपीआई एंडपॉइंट
app.get('/api/users', (req, res) => {
    res.status(200).json([
        { id: 1, name: "Amit Sharma" },
        { id: 2, name: "Priya Patel" }
    ]);
});

const PORT = 5000;
app.listen(PORT, () => {
    console.log(`Server successfully running on port ${PORT}`);
});

---

Dynamic Origins: जब आपके पास मल्टीपल फ्रंटएंड डोमेन्स हों

असली दुनिया में, जब आप कोई बड़ा ऐप बनाते हैं, तो आपके पास सिर्फ एक फ्रंटएंड URL नहीं होता। आपके पास डेवलपमेंट के लिए localhost, टेस्टिंग के लिए एक स्टेजिंग URL (जैसे Vercel या Netlify) और अंत में एक फाइनल प्रोडक्शन डोमेन (जैसे https://mywebapp.com) हो सकता है।

ऐसी स्थिति में आप corsOptions के origin प्रॉपर्टी में एक एरे (Array) या फिर एक कस्टमाइज़्ड फ़ंक्शन पास कर सकते हैं जो डायनेमिकली रिक्वेस्ट के ओरिजिन को चेक करेगा।

चलिए देखते हैं इसे कैसे लिखा जाता है:

const express = require('express');
const cors = require('cors');
const app = express();

// हमारे स्वीकृत डोमेन्स की लिस्ट (Whitelist)
const allowedOrigins = [
    'http://localhost:3000',
    'https://my-staging-app.vercel.app',
    'https://www.mywebapp.com'
];

const corsOptions = {
    origin: function (origin, callback) {
        // यदि ओरिजिन हमारी लिस्ट में है, या यदि कोई ओरिजिन नहीं है (जैसे Postman या सर्वर-टू-सर्वर रिक्वेस्ट)
        if (!origin || allowedOrigins.indexOf(origin) !== -1) {
            callback(null, true);
        } else {
            callback(new Error('Not allowed by CORS policy!'));
        }
    },
    credentials: true
};

app.use(cors(corsOptions));

app.get('/api/secure-data', (req, res) => {
    res.json({ message: "यह डेटा केवल स्वीकृत डोमेन्स को ही दिखाई देगा!" });
});

app.listen(5000, () => console.log("Server running on port 5000"));

---

CORS एरर से जुड़े कॉमन मिस्टेक्स और उनके सोलूशन्स

दोस्तों, कई बार सब कुछ सही सेट करने के बाद भी CORS एरर आ जाता है। चलिए कुछ ऐसी गलतियों पर नज़र डालते हैं जो अक्सर डेवलपर्स कर बैठते हैं:

१. 'cors' मिडलवेयर को रूट हैंडलर्स के नीचे लिखना

यह सबसे आम गलती है। एक्सप्रेस में मिडलवेयर्स का क्रम (Order) बहुत मायने रखता है। यदि आपने अपने रूट्स को पहले डिफाइन कर दिया और app.use(cors()) को नीचे लिखा, तो रूट्स पर रिक्वेस्ट जाने से पहले CORS हेडर सेट ही नहीं होंगे और ब्राउज़र एरर दे देगा।

समाधान: हमेशा अपने सभी API रूट्स (जैसे app.use('/api', myRouter)) को लिखने से पहले सबसे ऊपर CORS मिडलवेयर को रखें।

२. Credentials इनेबल करने पर Origin को '*' (Wildcard) सेट करना

यदि आपके फ्रंटएंड को कुकीज़ (Cookies) या सेशन क्रेडेंशियल्स की ज़रूरत है, और आपने अपने फ्रंटएंड फेच रिक्वेस्ट में credentials: 'include' सेट किया है, तो बैकएंड पर origin: '*' रखना सख्त मना है। ब्राउज़र इसे तुरंत ब्लॉक कर देगा और कंसोल में एरर फेंक देगा।

समाधान: जब भी credentials: true हो, तो origin में हमेशा एक स्पेसिफिक डोमेन (जैसे 'http://localhost:3000') ही पास करें, कभी भी वाइल्डकार्ड स्टार (*) का उपयोग न करें।

३. प्रोडक्शन में रिवर्स प्रॉक्सी (Nginx / Cloudflare) का इस्तेमाल करना

कई बार आपका कोड बिल्कुल सही होता है, लेकिन जब आप उसे प्रोडक्शन सर्वर जैसे AWS, VPS या Render पर डिप्लॉय करते हैं, तो आपका रिवर्स प्रॉक्सी सर्वर (जैसे Nginx) या Cloudflare भी CORS एरर दे सकता है।

समाधान: सुनिश्चित करें कि यदि आप Nginx का उपयोग कर रहे हैं, तो आपके Nginx कॉन्फ़िगरेशन फ़ाइल में CORS हेडर्स ओवरराइड न हो रहे हों, या फिर आप सीधे Nginx लेवल पर ही CORS हेडर्स को कॉन्फ़िगर कर दें और एक्सप्रेस कोड से हटा दें।

---

परफॉरमेंस और सिक्योरिटी के लिए बेस्ट प्रैक्टिसेज (Best Practices)

जब आप प्रोडक्शन लेवल पर काम कर रहे हों, तो केवल एरर को सॉल्व करना ही काफी नहीं होता। सर्वर की परफॉरमेंस और सिक्योरिटी को बनाए रखना भी उतना ही जरूरी है। यहाँ कुछ बेस्ट प्रैक्टिसेज दी गई हैं जिन्हें आपको हमेशा फॉलो करना चाहिए:

maxAge का उपयोग करें: ब्राउज़र हर बार रिक्वेस्ट भेजने से पहले जो Preflight (OPTIONS) रिक्वेस्ट भेजता है, उससे सर्वर पर लोड बढ़ता है। maxAge सेट करने से ब्राउज़र उस रिस्पॉन्स को कैश कर लेता है और बार-बार फालतू रिक्वेस्ट नहीं भेजता।
Production में Wildcard (*) से बचें: कभी भी अपने लाइव प्रोजेक्ट में origin: '*' न छोड़ें। यह आपके एपीआई को असुरक्षित बनाता है, जिससे कोई भी अनधिकृत वेबसाइट आपके सर्वर से डेटा चुरा सकती है।
केवल आवश्यक Methods की अनुमति दें: अगर आपका एपीआई केवल डेटा पढ़ने के लिए है, तो CORS में केवल GET मेथड की अनुमति दें। POST, PUT, DELETE को डिसेबल रखें।

---

संक्षेप में कहें तो... (Toh dosto, humne aaj seekha...)

तो दोस्तों, आज हमने सीखा कि ब्राउज़र का Same-Origin Policy सुरक्षा के लिए कितना आवश्यक है और कैसे यह हमारी सुरक्षा करता है। जब भी हमें अलग-अलग पोर्ट्स या डोमेन्स के बीच डेटा का आदान-प्रदान करना होता है, तो हमें सर्वर साइड पर एक्सप्रेस को यह बताना पड़ता है कि "हाँ, यह फ्रंटएंड हमारा ही है और हम इस पर भरोसा करते हैं।"

हमने मैन्युअल हेडर्स सेट करने का तरीका भी देखा और साथ ही cors पैकेज के जरिए एकदम प्रोफेशनल और सुरक्षित तरीके से इस समस्या का निवारण करना भी सीखा। अब अगली बार जब भी आपके कंसोल में यह एरर चमकेगा, तो आप बिना डरे इसे चुटकियों में सुलझा लेंगे!

कोडिंग करते रहिए, नई चीजें सीखते रहिए, और अगर कोई भी दुविधा हो, तो अपने इस सीनियर डेवलपर दोस्त को याद करना न भूलें। मिलते हैं अगले ट्यूटोरियल में!

---

Frequently Asked Questions (FAQs)

Q1: क्या Postman में रिक्वेस्ट भेजने पर भी CORS error आता है?
नहीं, Postman में रिक्वेस्ट भेजने पर CORS error कभी नहीं आता। CORS एक विशुद्ध रूप से "ब्राउज़र-आधारित" सुरक्षा नीति (Browser-side Security Policy) है। चूंकि Postman कोई ब्राउज़र नहीं है, इसलिए वह Same-Origin Policy को लागू नहीं करता। यही कारण है कि कोई भी API Postman में पूरी तरह काम करती है लेकिन ब्राउज़र के कंसोल में एरर देती है।

Q2: क्या मैं फ्रंटएंड साइड (React/Vue) से CORS error को पूरी तरह ठीक कर सकता हूँ?
नहीं, फ्रंटएंड कोड लिखकर आप ब्राउज़र की सुरक्षा नीति को बायपास नहीं कर सकते। CORS का वास्तविक और सही समाधान हमेशा "सर्वर-साइड" (Backend) पर ही होता है। हालांकि, डेवलपमेंट के दौरान आप React में package.json के अंदर "proxy": "http://localhost:5000" सेट करके इसे अस्थायी रूप से हल कर सकते हैं, लेकिन प्रोडक्शन में जाने पर आपको बैकएंड पर ही CORS कॉन्फ़िगर करना होगा।

Q3: Access-Control-Allow-Origin: '*' का क्या नुकसान है?
तारांकन चिह्न (*) का अर्थ है कि इंटरनेट पर मौजूद कोई भी वेबसाइट आपके सर्वर से डेटा का अनुरोध कर सकती है और उसे पढ़ सकती है। यदि आपका एपीआई पब्लिक है (जैसे मौसम की जानकारी या सार्वजनिक ब्लॉग), तो यह ठीक है। लेकिन यदि आपके एपीआई में संवेदनशील यूजर डेटा है, तो '*' सेट करने से कोई भी दुर्भावनापूर्ण वेबसाइट (Malicious Website) आपके यूजर्स के डेटा को स्क्रिप्ट के जरिए चुरा सकती है, जो कि बहुत बड़ा सुरक्षा जोखिम है।

DEV Community: banti kevat

Next.js 14 Kya Hai aur React Developer Ko ise Kyun Sikhna Chahiye?

क्या आपका React application बहुत धीमा लोड हो रहा है और SEO में रैंकिंग नहीं मिल रही?

Next.js 14 क्या है?

React डेवलपर को Next.js 14 क्यों सीखना चाहिए?

Next.js vs React: एक तुलना

Next.js 14 कैसे काम करता है? (स्टेप-बाय-स्टेप)

Common Errors और उन्हें कैसे सुलझाएं

बेस्ट प्रैक्टिस और परफॉरमेंस

Summary: हमने आज क्या सीखा?

Frequently Asked Questions (FAQs)

Express JS me req.body undefined error kaise solve kare

Express JS में req.body undefined Error को चुटकियों में कैसे Solve करें: A Complete Practical Guide

1. आखिर req.body undefined क्यों आता है? इसके पीछे का Science

2. The Problem: वो गलत कोड जो हम अक्सर लिख देते हैं

3. The Solution: Built-in Middlewares को काम पर लगाएं

Solution 1: Application/JSON के लिए express.json()

Solution 2: URL-Encoded (HTML Form) के लिए express.urlencoded()

4. The Correct, Production-Ready Code

5. Edge Cases: इन गलतियों की वजह से अब भी आ सकता है undefined!

Edge Case A: Middleware का ऑर्डर गलत होना (Order of Execution)

Edge Case B: Content-Type Header का गलत होना

Edge Case C: File Uploading और Multi-part FormData

Multer का उपयोग करके File और Text Field को साथ में संभालने का उदाहरण:

6. Debugging Masterclass: सर्वर को कैसे जाचें?

Toh dosto, humne aaj seekha...

Frequently Asked Questions (FAQs)

Express JS me CORS error kaise solve kare

आखिर यह CORS क्या है? (What is CORS?)

Same-Origin Policy (SOP) क्या है?

CORS काम कैसे करता है? (How CORS Works under the hood)

1. Simple Requests

2. Preflight Requests (OPTIONS Method)

Express JS में CORS Error को हल करने के तरीके

तरीका १: कस्टम मिडलवेयर के ज़रिए हेडर्स सेट करना (Manual Method)

यह कोड कैसे काम करता है?

तरीका २: 'cors' NPM पैकेज का उपयोग करना (The Industry Standard)

Step 1: पैकेज इंस्टॉल करें

Step 2: Express ऐप में इसका इस्तेमाल करें

Dynamic Origins: जब आपके पास मल्टीपल फ्रंटएंड डोमेन्स हों

CORS एरर से जुड़े कॉमन मिस्टेक्स और उनके सोलूशन्स

१. 'cors' मिडलवेयर को रूट हैंडलर्स के नीचे लिखना

२. Credentials इनेबल करने पर Origin को '*' (Wildcard) सेट करना

३. प्रोडक्शन में रिवर्स प्रॉक्सी (Nginx / Cloudflare) का इस्तेमाल करना

परफॉरमेंस और सिक्योरिटी के लिए बेस्ट प्रैक्टिसेज (Best Practices)

संक्षेप में कहें तो... (Toh dosto, humne aaj seekha...)

Frequently Asked Questions (FAQs)

Solution 1: Application/JSON के लिए `express.json()`

Solution 2: URL-Encoded (HTML Form) के लिए `express.urlencoded()`