jQuery இல் CORS பிழைகளைப் புரிந்துகொள்வது ஆனால் போஸ்ட்மேனில் இல்லை

Arthur Petit

வியாழன், 4 ஜூலை, 2024 ’அன்று’ முற்பகல் 10:12:18

உலாவிகளில் CORS பிழைகள் ஏன் நிகழ்கின்றன?

RESTful API உடன் இணைக்க JavaScript உடன் பணிபுரியும் போது, "கோரிய ஆதாரத்தில் 'Access-Control-Allow-Origin' தலைப்பு இல்லை" என்ற பிழையை நீங்கள் சந்திக்கலாம். உலாவியின் ஒரே தோற்றம் கொள்கையின் காரணமாக இந்த பிழை பொதுவாக ஏற்படுகிறது, இது வலைப்பக்கத்தில் சேவை செய்ததை விட வேறு டொமைனுக்கு கோரிக்கைகளை வைப்பதை வலைப்பக்கங்களை கட்டுப்படுத்துகிறது.

சுவாரஸ்யமாக, அதே கோரிக்கையை போஸ்ட்மேன் போன்ற கருவிகள் மூலம் செய்யப்படும் போது, அத்தகைய பிழை ஏற்படாது. இந்த வேறுபாடு டெவலப்பர்களுக்கு குழப்பமாக இருக்கலாம். உலாவியில் CORS ஆல் XMLHttpRequest அல்லது அழைப்புகளைப் பெறுவது ஏன் தடுக்கப்படுகிறது என்பதைப் புரிந்துகொள்வது, ஆனால் போஸ்ட்மேனில் இல்லை, பிழையறிந்து பாதுகாப்பான இணையப் பயன்பாடுகளை உருவாக்குவதற்கு முக்கியமானது.

ஃபிளாஸ்க் பின்தளத்தில் ஜாவாஸ்கிரிப்டில் 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 சிக்கல்கள் உலாவிகளில் ஏற்படுகின்றன மற்றும் போஸ்ட்மேனில் இல்லை

கிராஸ்-ஆரிஜின் ரிசோர்ஸ் ஷேரிங் (சிஓஆர்எஸ்) பற்றி புரிந்து கொள்ள ஒரு முக்கியமான அம்சம், பயனர்களைப் பாதுகாக்க உலாவிகள் செயல்படுத்தும் பாதுகாப்பு பொறிமுறையாகும். உலாவிகள் ஒரே தோற்றம் கொள்கையை செயல்படுத்துகின்றன, இது வலைப்பக்கத்தில் சேவை செய்ததை விட வேறு டொமைனுக்கான கோரிக்கைகளை வலைப்பக்கங்களைத் தடுக்கிறது. தீங்கிழைக்கும் இணையதளங்கள் ஜாவாஸ்கிரிப்ட் மூலம் மற்ற இணையதளங்களில் உள்ள முக்கியமான தகவல்களை அணுகுவதைத் தடுப்பதற்கான பாதுகாப்பு நடவடிக்கை இது. நீங்கள் ஒரு XMLHttpRequest செய்யும் போது அல்லது உலாவியில் இருந்து கோரிக்கையைப் பெறும்போது, அது சரிபார்க்கிறது 'Access-Control-Allow-Origin' சேவையகத்திலிருந்து வரும் பதிலில் தலைப்பு. இந்த தலைப்பு இல்லையெனில் அல்லது கோரும் மூலத்தை அனுமதிக்கவில்லை என்றால், உலாவி கோரிக்கையைத் தடுக்கும், இதன் விளைவாக CORS பிழை ஏற்படும்.

மறுபுறம், போஸ்ட்மேன் ஒரு உலாவி அல்ல, ஆனால் API களை சோதிக்கும் கருவியாகும். உலாவி சூழலில் இயங்காததால் ஒரே தோற்றம் கொள்கையை இது செயல்படுத்தாது. எனவே, இது ஒரே மாதிரியான பாதுகாப்புச் சோதனைகளைச் செய்யாது மற்றும் எந்தவொரு டொமைனுக்கும் கட்டுப்பாடுகள் இல்லாமல் கோரிக்கைகளைச் செய்ய அனுமதிக்கிறது. இதனால்தான் இதே கோரிக்கையைச் செய்ய போஸ்ட்மேனைப் பயன்படுத்தும் போது நீங்கள் CORS சிக்கல்களைச் சந்திக்கவில்லை. இந்த வேறுபாட்டைப் புரிந்துகொள்வது டெவலப்பர்களுக்கு CORS தொடர்பான சிக்கல்களைத் திறம்பட சரிசெய்து தீர்க்க மிகவும் முக்கியமானது. பொருத்தமான CORS தலைப்புகளைச் சேர்ப்பதற்கு சேவையகத்தை உள்ளமைப்பதன் மூலம், உங்கள் வலைப் பயன்பாடு வெளிப்புற APIகளுடன் பாதுகாப்பாகவும் பிழைகள் இல்லாமலும் தொடர்புகொள்வதை உறுதிசெய்யலாம்.

CORS மற்றும் JavaScript பற்றிய பொதுவான கேள்விகள் மற்றும் பதில்கள்

CORS என்றால் என்ன?
CORS என்பது கிராஸ்-ஆரிஜின் ரிசோர்ஸ் ஷேரிங் என்பதன் சுருக்கமாகும், இது ஒரு வலைப்பக்கத்தில் உள்ள கட்டுப்படுத்தப்பட்ட ஆதாரங்களை வளம் தோன்றிய டொமைனுக்கு வெளியே உள்ள மற்றொரு டொமைனிலிருந்து கோருவதற்கு அனுமதிக்கும் ஒரு பொறிமுறையாகும்.
உலாவிகள் ஒரே மூலக் கொள்கையை ஏன் செயல்படுத்துகின்றன?
பயனர்களின் தரவைப் பாதுகாப்பதற்கும், தீங்கிழைக்கும் இணையதளங்கள் ஜாவாஸ்கிரிப்ட் மூலம் மற்ற டொமைன்களில் இருந்து முக்கியமான தகவல்களை அணுகுவதைத் தடுப்பதற்கும் ஒரே மூலக் கொள்கை செயல்படுத்தப்படுகிறது.
போஸ்ட்மேன் ஏன் CORS ஐ அமல்படுத்தவில்லை?
போஸ்ட்மேன் CORS ஐச் செயல்படுத்தவில்லை, ஏனெனில் இது உலாவி அல்ல, உலாவி சூழலில் இயங்காது, எனவே அது ஒரே தோற்றம் கொள்கையை கடைபிடிக்க வேண்டிய அவசியமில்லை.
எனது வலைப் பயன்பாட்டில் உள்ள CORS பிழையை நான் எவ்வாறு தீர்ப்பது?
CORS பிழையைத் தீர்க்க, பொருத்தமானவற்றைச் சேர்க்க சேவையகத்தை உள்ளமைக்கவும் 'Access-Control-Allow-Origin' பதிலில் உள்ள தலைப்பு, கோரும் தோற்றத்தை அனுமதிக்கிறது.
என்ன செய்கிறது 'Access-Control-Allow-Origin' தலைப்பு செய்யவா?
தி 'Access-Control-Allow-Origin' எந்த மூலங்கள் ஆதாரத்தை அணுக அனுமதிக்கப்படுகின்றன என்பதை தலைப்பு குறிப்பிடுகிறது, இது குறுக்கு மூல கோரிக்கைகளை செயல்படுத்துகிறது.
நோக்கம் என்ன withCredentials XMLHttpRequest இல்?
தி withCredentials குக்கீகள் அல்லது அங்கீகார தலைப்புகள் போன்ற நற்சான்றிதழ்களைப் பயன்படுத்தி குறுக்கு-தள அணுகல்-கட்டுப்பாட்டு கோரிக்கைகள் செய்யப்பட வேண்டுமா இல்லையா என்பதை சொத்து குறிக்கிறது.
எனது சர்வரில் உள்ளடங்கியிருந்தாலும், நான் ஏன் CORS பிழையைப் பெறுகிறேன் 'Access-Control-Allow-Origin' தலைப்பு?
தேவைப்படும் பிற CORS தலைப்புகள் எனில், நீங்கள் CORS பிழையைப் பெறலாம் 'Access-Control-Allow-Methods' அல்லது 'Access-Control-Allow-Headers', காணவில்லை அல்லது தவறாக உள்ளமைக்கப்பட்டுள்ளன.
எனது உலாவியில் CORS ஐ முடக்க முடியுமா?
உலாவியில் CORS ஐ முடக்குவது பாதுகாப்பை சமரசம் செய்வதால் பரிந்துரைக்கப்படவில்லை. அதற்கு பதிலாக, CORS ஐ சரியாக கையாள உங்கள் சேவையகத்தை உள்ளமைக்கவும்.
CORS இல் முன்விமானக் கோரிக்கை என்றால் என்ன?
ப்ரீஃப்லைட் கோரிக்கை என்பது, உண்மையான கோரிக்கையை அனுப்புவது பாதுகாப்பானதா என்பதைத் தீர்மானிக்க, OPTIONS முறையைப் பயன்படுத்தி உலாவியால் செய்யப்படும் ஆரம்பக் கோரிக்கையாகும். இது சர்வரில் தேவையான CORS தலைப்புகளை சரிபார்க்கிறது.

விவாதத்தை முடிப்பது

CORS இன் நுணுக்கங்களையும் அதே மூலக் கொள்கையையும் புரிந்துகொள்வது இணைய உருவாக்குநர்களுக்கு அவசியம். உலாவிகள் பயனர்களைப் பாதுகாக்க கடுமையான பாதுகாப்பு நடவடிக்கைகளைச் செயல்படுத்தும் அதே வேளையில், போஸ்ட்மேன் போன்ற கருவிகள் இந்தக் கட்டுப்பாடுகளைத் தவிர்த்து, APIகளைச் சோதிப்பதை எளிதாக்குகின்றன. தேவையான CORS தலைப்புகளுடன் பின்தளத்தை சரியாக உள்ளமைப்பதன் மூலம், டெவலப்பர்கள் முன் மற்றும் பின்தளத்திற்கு இடையே மென்மையான மற்றும் பாதுகாப்பான தொடர்பை உறுதி செய்ய முடியும். செயல்பாட்டு மற்றும் பயனர் நட்பு வலை பயன்பாடுகளை உருவாக்குவதற்கு CORS சிக்கல்களைத் தீர்ப்பது மிகவும் முக்கியமானது.