जावास्क्रिप्ट में AJAX रिक्वेस्ट्स में CORS पॉलिसी

AJAX के माध्यम से आप अन्य साइटों को रिक्वेस्ट्स (cross-origin requests) सीधे नहीं भेज सकते हैं। ऐसे रिक्वेस्ट्स CORS पॉलिसी द्वारा नियंत्रित होते हैं। संक्षेप में, इस पॉलिसी के अनुसार वह साइट, जिसे आप रिक्वेस्ट भेज रहे हैं, को उसका जवाब देने के लिए सहमत होना चाहिए। इसके लिए उसे संबंधित HTTP हैडर्स देना होगा।

चलिए व्यवहार में कोशिश करते हैं। चलिए दो टेस्ट सर्वर अलग-अलग पोर्ट्स पर चलाते हैं। पहला 3001 पर, और दूसरा 3002 पर। चलिए दूसरी साइट से पहली साइट पर एक AJAX रिक्वेस्ट भेजने की कोशिश करते हैं।

मान लीजिए कि पहली साइट निम्नलिखित रिक्वेस्ट्स प्राप्त करने के लिए तैयार है:

test-http-server1/server.jsexport default {
  '/handler/': function({ body }) {
    console.log(body);
    return 'success';
  }
}

चलिए दूसरी साइट से पहली साइट पर एक रिक्वेस्ट भेजते हैं:

test-http-server2/public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('http://localhost:3001/handler/', {
    method: 'post',
    body: JSON.stringify([1, 2, 3, 4, 5]),
    headers: {
      'Content-Type': 'application/json',
    },
  });
});

परिणामस्वरूप रिक्वेस्ट निष्पादित नहीं होगी, और ब्राउज़र कंसोल में हम CORS पॉलिसी से संबंधित एक त्रुटि देखेंगे।

रिक्वेस्ट के निष्पादित होने के लिए, पहले सर्वर को विशेष HTTP हैडर्स देना होगा। चलिए उन्हें निर्दिष्ट करते हैं - और दूसरी साइट से रिक्वेस्ट पहली साइट पर जाने लगेगी:

test-http-server1/server.jsexport default {
  '/handler/': function({ body, resp }) {
    resp.setHeader('Access-Control-Allow-Origin', '*');
    resp.setHeader('Access-Control-Allow-Headers', '*');
    
    console.log(body);
    return 'success';
  }
}