Разумевање грешака ЦОРС у јКуери-ју, али не и у Постман-у

Arthur Petit

четвртак, 04. јул 2024. 10:05:57

Зашто се грешке ЦОРС јављају у прегледачима?

Када радите са ЈаваСцрипт-ом за повезивање са РЕСТфул АПИ-јем, можда ћете наићи на грешку „Нема заглавља „Аццесс-Цонтрол-Аллов-Оригин“ на траженом ресурсу“. Ова грешка се обично јавља због исте политике порекла претраживача, која ограничава веб странице да упућују захтеве на домен који се разликује од оног који је служио веб страницу.

Занимљиво је да када се исти захтев упути преко алата као што је Постман, не долази до такве грешке. Ова разлика може бити збуњујућа за програмере. Разумевање зашто ЦОРС блокира позиве КСМЛХттпРекуест или преузимања у прегледачу, али не и у Постман-у, кључно је за решавање проблема и развој безбедних веб апликација.

Решавање ЦОРС проблема у ЈаваСцрипт-у са позадинским делом Фласк-а

ЈаваСцрипт фронтенд код користећи јКуери

// 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);
    });
  });
});

Подешавање ЦОРС-а у Фласк-у

Питхон позадински код који користи Фласк

# 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)

Решавање ЦОРС проблема у ЈаваСцрипт-у са позадинским делом Фласк-а

ЈаваСцрипт фронтенд код користећи јКуери

// 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);
    });
  });
});

Подешавање ЦОРС-а у Фласк-у

Питхон позадински код који користи Фласк

# 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)

Зашто се проблеми са ЦОРС-ом јављају у прегледачима, а не у Постман-у

Један кључни аспект за разумевање дељења ресурса са више извора (ЦОРС) је безбедносни механизам који прегледачи примењују да би заштитили кориснике. Прегледачи примењују политику истог порекла, која спречава веб странице да упућују захтеве на домен који се разликује од оног који је опслуживао веб страницу. Ово је безбедносна мера која спречава злонамерне веб локације да приступе осетљивим информацијама на другим веб локацијама путем ЈаваСцрипт-а. Када направите КСМЛХттпРекуест или преузмете захтев из прегледача, он проверава да ли постоји 'Access-Control-Allow-Origin' заглавље у одговору са сервера. Ако ово заглавље није присутно или не дозвољава извор захтева, прегледач ће блокирати захтев, што ће резултирати грешком ЦОРС.

Постман, с друге стране, није претраживач већ алат за тестирање АПИ-ја. Не примењује политику истог порекла јер се не ради у окружењу претраживача. Због тога не врши исте безбедносне провере и дозвољава да се захтеви упућују на било који домен без ограничења. Због тога не наилазите на проблеме са ЦОРС-ом када користите Постман за подношење истог захтева. Разумевање ове разлике је кључно за програмере како би ефикасно решили проблеме у вези са ЦОРС-ом. Конфигурисањем сервера да укључује одговарајућа ЦОРС заглавља, можете осигурати да ваша веб апликација може безбедно и без грешака да комуницира са спољним АПИ-јима.

Уобичајена питања и одговори о ЦОРС-у и ЈаваСцрипт-у

Шта је ЦОРС?
ЦОРС је скраћеница од Цросс-Оригин Ресоурце Схаринг, механизам који омогућава да се ограничени ресурси на веб страници захтевају са другог домена изван домена са којег извор потиче.
Зашто прегледачи примењују политику истог порекла?
Политика истог порекла се примењује да би заштитила податке корисника и спречила злонамерне веб локације да приступе осетљивим информацијама са других домена путем ЈаваСцрипт-а.
Зашто поштар не спроводи ЦОРС?
Поштар не примењује ЦОРС јер није претраживач и не ради у окружењу претраживача, тако да не мора да се придржава политике истог порекла.
Како могу да решим ЦОРС грешку у својој веб апликацији?
Да бисте решили ЦОРС грешку, конфигуришите сервер да укључи одговарајуће 'Access-Control-Allow-Origin' заглавље у одговору, дозвољавајући порекло захтева.
Шта значи 'Access-Control-Allow-Origin' хеадер до?
Тхе 'Access-Control-Allow-Origin' заглавље одређује којим изворима је дозвољен приступ ресурсу, омогућавајући захтеве за више извора.
Шта је сврха withCredentials у КСМЛХттпРекуест?
Тхе withCredentials својство означава да ли захтеви за контролу приступа на више локација треба да се упућују помоћу акредитива као што су колачићи или заглавља овлашћења.
Зашто добијам ЦОРС грешку иако мој сервер укључује 'Access-Control-Allow-Origin' хеадер?
И даље ћете можда добити ЦОРС грешку ако друга потребна ЦОРС заглавља, као што је нпр 'Access-Control-Allow-Methods' или 'Access-Control-Allow-Headers', недостају или су погрешно конфигурисани.
Могу ли да онемогућим ЦОРС у свом претраживачу?
Онемогућавање ЦОРС-а у претраживачу се не препоручује јер угрожава безбедност. Уместо тога, конфигуришите свој сервер да правилно рукује ЦОРС-ом.
Шта је захтев пре лета у ЦОРС-у?
Претходни захтев је почетни захтев који је направио прегледач користећи метод ОПТИОНС да би утврдио да ли је стварни захтев безбедан за слање. Проверава потребна ЦОРС заглавља на серверу.

Завршавање дискусије

Разумевање нијанси ЦОРС-а и исте политике порекла је од суштинског значаја за веб програмере. Док претраживачи примењују строге безбедносне мере за заштиту корисника, алати као што је Постман заобилазе ова ограничења, што олакшава тестирање АПИ-ја. Правилним конфигурисањем позадинског дела са неопходним ЦОРС заглављима, програмери могу да обезбеде глатку и безбедну комуникацију између фронтенда и позадинског дела. Решавање проблема ЦОРС-а је кључно за креирање функционалних веб апликација које су прилагођене кориснику.