jQuery এ CORS ত্রুটি বোঝা কিন্তু পোস্টম্যানে নয়

jQuery এ CORS ত্রুটি বোঝা কিন্তু পোস্টম্যানে নয়
Arthur Petit
বৃহস্পতিবার, ৪ জুলাই, ২০২৪ ৯:২৮:৪৪ AM
JavaScript

কেন ব্রাউজারগুলিতে CORS ত্রুটিগুলি ঘটে?

একটি RESTful API-এর সাথে সংযোগ করার জন্য JavaScript-এর সাথে কাজ করার সময়, আপনি একটি "অনুরোধিত সংস্থানে 'অ্যাক্সেস-কন্ট্রোল-অ্যালো-অরিজিন' হেডার উপস্থিত নেই" ত্রুটির সম্মুখীন হতে পারেন৷ এই ত্রুটিটি সাধারণত ব্রাউজারের একই অরিজিন নীতির কারণে ঘটে, যা ওয়েব পৃষ্ঠাগুলিকে একটি ভিন্ন ডোমেনে অনুরোধ করতে বাধা দেয় যা ওয়েব পৃষ্ঠাটি পরিবেশন করে।

মজার বিষয় হল, যখন পোস্টম্যানের মতো টুলের মাধ্যমে একই অনুরোধ করা হয়, তখন এ ধরনের কোনো ত্রুটি ঘটে না। এই পার্থক্য বিকাশকারীদের জন্য বিভ্রান্তিকর হতে পারে। কেন XMLHttpRequest বা আনয়ন কলগুলি ব্রাউজারে CORS দ্বারা ব্লক করা হয়েছে, কিন্তু পোস্টম্যানে নয়, তা বোঝা সমস্যা সমাধান এবং সুরক্ষিত ওয়েব অ্যাপ্লিকেশন বিকাশের জন্য অত্যন্ত গুরুত্বপূর্ণ৷

ফ্লাস্ক ব্যাকএন্ড দিয়ে জাভাস্ক্রিপ্টে CORS সমস্যা সমাধান করা

jQuery ব্যবহার করে জাভাস্ক্রিপ্ট ফ্রন্টএন্ড কোড

// JavaScript (jQuery) frontend script
$(document).ready(function() {
  $("#loginButton").click(function() {
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: 'http://localhost:5000/login',
      data: JSON.stringify({
        username: 'user',
        password: 'pass'
      }),
      contentType: 'application/json',
      crossDomain: true,
      xhrFields: {
        withCredentials: true
      }
    }).done(function(data) {
      console.log('Login successful');
    }).fail(function(xhr, textStatus, errorThrown) {
      alert('Error: ' + xhr.responseText);
    });
  });
});

ফ্লাস্কে CORS সেট আপ করা হচ্ছে

ফ্লাস্ক ব্যবহার করে পাইথন ব্যাকএন্ড কোড

# Python (Flask) backend script
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data.get('username')
    password = data.get('password')

    if username == 'user' and password == 'pass':
        return jsonify({'message': 'Login successful'}), 200
    else:
        return jsonify({'message': 'Invalid credentials'}), 401

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

ফ্লাস্ক ব্যাকএন্ড দিয়ে জাভাস্ক্রিপ্টে CORS সমস্যা সমাধান করা

jQuery ব্যবহার করে জাভাস্ক্রিপ্ট ফ্রন্টএন্ড কোড

// JavaScript (jQuery) frontend script
$(document).ready(function() {
  $("#loginButton").click(function() {
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: 'http://localhost:5000/login',
      data: JSON.stringify({
        username: 'user',
        password: 'pass'
      }),
      contentType: 'application/json',
      crossDomain: true,
      xhrFields: {
        withCredentials: true
      }
    }).done(function(data) {
      console.log('Login successful');
    }).fail(function(xhr, textStatus, errorThrown) {
      alert('Error: ' + xhr.responseText);
    });
  });
});

ফ্লাস্কে CORS সেট আপ করা হচ্ছে

ফ্লাস্ক ব্যবহার করে পাইথন ব্যাকএন্ড কোড

# Python (Flask) backend script
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data.get('username')
    password = data.get('password')

    if username == 'user' and password == 'pass':
        return jsonify({'message': 'Login successful'}), 200
    else:
        return jsonify({'message': 'Invalid credentials'}), 401

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

কেন CORS সমস্যাগুলি ব্রাউজারগুলিতে ঘটে এবং পোস্টম্যানে নয়৷

ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) সম্পর্কে বোঝার জন্য একটি গুরুত্বপূর্ণ দিক হল নিরাপত্তা ব্যবস্থা যা ব্রাউজার ব্যবহারকারীদের সুরক্ষার জন্য প্রয়োগ করে। ব্রাউজারগুলি একই-অরিজিন নীতি প্রয়োগ করে, যা ওয়েব পৃষ্ঠাগুলিকে একটি ভিন্ন ডোমেনে অনুরোধ করতে বাধা দেয় যা ওয়েব পৃষ্ঠাটি পরিবেশন করে। জাভাস্ক্রিপ্টের মাধ্যমে অন্য ওয়েবসাইটগুলিতে সংবেদনশীল তথ্য অ্যাক্সেস করা থেকে ক্ষতিকারক ওয়েবসাইটগুলিকে প্রতিরোধ করার জন্য এটি একটি নিরাপত্তা ব্যবস্থা৷ আপনি যখন একটি XMLHttpRequest করেন বা একটি ব্রাউজার থেকে অনুরোধ আনেন, তখন এটি পরীক্ষা করে 'Access-Control-Allow-Origin' সার্ভার থেকে প্রতিক্রিয়া শিরোনাম. যদি এই শিরোনামটি উপস্থিত না থাকে বা অনুরোধের উত্সকে অনুমতি না দেয়, তাহলে ব্রাউজার অনুরোধটিকে ব্লক করবে, যার ফলে একটি CORS ত্রুটি হবে৷

অন্যদিকে, পোস্টম্যান একটি ব্রাউজার নয় কিন্তু API পরীক্ষা করার জন্য একটি টুল। এটি একই-অরিজিন নীতি প্রয়োগ করে না কারণ এটি ব্রাউজার পরিবেশের মধ্যে চলছে না। অতএব, এটি একই নিরাপত্তা পরীক্ষা সঞ্চালন করে না এবং সীমাবদ্ধতা ছাড়াই যেকোনো ডোমেনে অনুরোধ করার অনুমতি দেয়। এই কারণে একই অনুরোধ করতে পোস্টম্যান ব্যবহার করার সময় আপনি CORS সমস্যার সম্মুখীন হন না। CORS-সম্পর্কিত সমস্যাগুলি কার্যকরভাবে সমাধান করতে এবং সমাধান করতে বিকাশকারীদের জন্য এই পার্থক্যটি বোঝা অত্যন্ত গুরুত্বপূর্ণ। উপযুক্ত CORS শিরোনাম অন্তর্ভুক্ত করার জন্য সার্ভার কনফিগার করে, আপনি নিশ্চিত করতে পারেন যে আপনার ওয়েব অ্যাপ্লিকেশনটি নিরাপদে এবং ত্রুটি ছাড়াই বহিরাগত API-এর সাথে যোগাযোগ করতে পারে।

CORS এবং জাভাস্ক্রিপ্ট সম্পর্কে সাধারণ প্রশ্ন এবং উত্তর

  1. CORS কি?
  2. CORS হল ক্রস-অরিজিন রিসোর্স শেয়ারিং, এমন একটি প্রক্রিয়া যা একটি ওয়েব পৃষ্ঠায় সীমাবদ্ধ সংস্থানগুলিকে সেই ডোমেনের বাইরে অন্য ডোমেন থেকে অনুরোধ করার অনুমতি দেয় যেখান থেকে সংস্থানটি উদ্ভূত হয়েছে।
  3. কেন ব্রাউজার একই-অরিজিন নীতি প্রয়োগ করে?
  4. একই-অরিজিন নীতি ব্যবহারকারীদের ডেটা রক্ষা করতে এবং জাভাস্ক্রিপ্টের মাধ্যমে অন্যান্য ডোমেন থেকে সংবেদনশীল তথ্য অ্যাক্সেস করা থেকে ক্ষতিকারক ওয়েবসাইটগুলিকে প্রতিরোধ করার জন্য প্রয়োগ করা হয়েছে৷
  5. পোস্টম্যান কেন CORS প্রয়োগ করে না?
  6. পোস্টম্যান CORS প্রয়োগ করে না কারণ এটি একটি ব্রাউজার নয় এবং ব্রাউজার পরিবেশে চলে না, তাই এটিকে একই-অরিজিন নীতি মেনে চলার প্রয়োজন নেই৷
  7. আমি কিভাবে আমার ওয়েব অ্যাপ্লিকেশনে একটি CORS ত্রুটি সমাধান করতে পারি?
  8. একটি CORS ত্রুটি সমাধান করতে, উপযুক্ত অন্তর্ভুক্ত করতে সার্ভার কনফিগার করুন৷ 'Access-Control-Allow-Origin' উত্তরে শিরোনাম, অনুরোধের উত্সকে অনুমতি দেয়।
  9. কি করে 'Access-Control-Allow-Origin' হেডার করতে?
  10. দ্য 'Access-Control-Allow-Origin' হেডার নির্দিষ্ট করে যে কোন উৎসগুলিকে রিসোর্স অ্যাক্সেস করার অনুমতি দেওয়া হয়েছে, ক্রস-অরিজিন অনুরোধগুলিকে সক্ষম করে।
  11. উদ্দেশ্য কি withCredentials XMLHttpRequest এ?
  12. দ্য withCredentials সম্পত্তি নির্দেশ করে যে ক্রস-সাইট অ্যাক্সেস-কন্ট্রোল অনুরোধগুলি কুকিজ বা অনুমোদন শিরোনামের মতো শংসাপত্র ব্যবহার করে করা উচিত কিনা।
  13. কেন আমি একটি CORS ত্রুটি পেতে পারি যদিও আমার সার্ভার অন্তর্ভুক্ত 'Access-Control-Allow-Origin' শিরোনাম?
  14. আপনি এখনও একটি CORS ত্রুটি পেতে পারেন যদি অন্যান্য প্রয়োজনীয় CORS শিরোনাম, যেমন 'Access-Control-Allow-Methods' বা 'Access-Control-Allow-Headers', অনুপস্থিত বা ভুলভাবে কনফিগার করা হয়েছে।
  15. আমি কি আমার ব্রাউজারে CORS অক্ষম করতে পারি?
  16. একটি ব্রাউজারে CORS অক্ষম করা বাঞ্ছনীয় নয় কারণ এটি নিরাপত্তার সাথে আপস করে। পরিবর্তে, CORS সঠিকভাবে পরিচালনা করতে আপনার সার্ভার কনফিগার করুন।
  17. CORS-এ একটি preflight অনুরোধ কি?
  18. একটি প্রিফ্লাইট অনুরোধ হল একটি প্রাথমিক অনুরোধ যা ব্রাউজার দ্বারা OPTIONS পদ্ধতি ব্যবহার করে প্রকৃত অনুরোধ পাঠানো নিরাপদ কিনা তা নির্ধারণ করে। এটি সার্ভারে প্রয়োজনীয় CORS হেডারের জন্য পরীক্ষা করে।

আলোচনা আপ মোড়ানো

ওয়েব ডেভেলপারদের জন্য CORS এবং একই মূল নীতির সূক্ষ্মতা বোঝা অপরিহার্য। যদিও ব্রাউজারগুলি ব্যবহারকারীদের সুরক্ষার জন্য কঠোর নিরাপত্তা ব্যবস্থা প্রয়োগ করে, পোস্টম্যানের মতো সরঞ্জামগুলি এই বিধিনিষেধগুলিকে বাইপাস করে, APIগুলি পরীক্ষা করা সহজ করে তোলে৷ প্রয়োজনীয় CORS শিরোনামগুলির সাথে সঠিকভাবে ব্যাকএন্ড কনফিগার করে, বিকাশকারীরা ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে মসৃণ এবং নিরাপদ যোগাযোগ নিশ্চিত করতে পারে। কার্যকরী এবং ব্যবহারকারী-বান্ধব ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য CORS সমস্যাগুলির সমাধান করা অত্যন্ত গুরুত্বপূর্ণ।