JQuery'deki CORS Hatalarını Anlamak ancak Postman'da Değil

Arthur Petit

4 Temmuz 2024 Perşembe 10:13:36

Tarayıcılarda CORS Hataları Neden Oluşuyor?

Bir RESTful API'ye bağlanmak için JavaScript ile çalışırken "İstenen kaynakta 'Erişim Kontrolü-İzin Verme-Origin' başlığı yok" hatasıyla karşılaşabilirsiniz. Bu hata genellikle tarayıcının, web sayfalarının, web sayfasına hizmet veren alan adından farklı bir alan adına istekte bulunmasını kısıtlayan Aynı Kaynak Politikası nedeniyle oluşur.

İlginçtir ki aynı istek Postman gibi araçlar üzerinden yapıldığında böyle bir hata oluşmuyor. Bu fark geliştiriciler için kafa karıştırıcı olabilir. XMLHttpRequest veya fetch çağrılarının neden Postman'da değil de tarayıcıda CORS tarafından engellendiğini anlamak, sorun giderme ve güvenli web uygulamaları geliştirme açısından çok önemlidir.

Flask Backend ile JavaScript'te CORS Sorunlarını Çözme

JQuery Kullanarak JavaScript Ön Uç Kodu

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

Flask'ta CORS Kurulumu

Flask Kullanarak Python Arka Uç Kodu

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

Flask Backend ile JavaScript'te CORS Sorunlarını Çözme

JQuery Kullanarak JavaScript Ön Uç Kodu

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

Flask'ta CORS Kurulumu

Flask Kullanarak Python Arka Uç Kodu

# 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 Sorunları Neden Postacıda Değil de Tarayıcılarda Oluşuyor?

Çapraz Kökenli Kaynak Paylaşımı (CORS) hakkında anlaşılması gereken önemli hususlardan biri, tarayıcıların kullanıcıları korumak için uyguladığı güvenlik mekanizmasıdır. Tarayıcılar, web sayfalarının, web sayfasına hizmet veren alan adından farklı bir alan adına istekte bulunmasını engelleyen Aynı Kaynak Politikasını uygular. Bu, kötü amaçlı web sitelerinin diğer web sitelerindeki hassas bilgilere JavaScript aracılığıyla erişmesini önlemeye yönelik bir güvenlik önlemidir. Bir XMLHttpRequest yaptığınızda veya bir tarayıcıdan istek getirdiğinizde, 'Access-Control-Allow-Origin' sunucudan gelen yanıttaki başlık. Bu başlık mevcut değilse veya istekte bulunan kaynağa izin vermiyorsa, tarayıcı isteği engelleyecek ve CORS hatasıyla sonuçlanacaktır.

Öte yandan Postman bir tarayıcı değil, API'leri test etmeye yönelik bir araçtır. Tarayıcı ortamında çalışmadığı için Aynı Kaynak Politikasını uygulamaz. Bu nedenle aynı güvenlik kontrollerini gerçekleştirmez ve herhangi bir alan adına kısıtlama olmaksızın istek yapılmasına izin verir. Bu nedenle aynı isteği yapmak için Postman'ı kullanırken CORS sorunlarıyla karşılaşmıyorsunuz. Bu farkı anlamak, geliştiricilerin CORS ile ilgili sorunları etkili bir şekilde gidermesi ve çözmesi açısından çok önemlidir. Sunucuyu uygun CORS başlıklarını içerecek şekilde yapılandırarak web uygulamanızın harici API'lerle güvenli ve hatasız iletişim kurabilmesini sağlayabilirsiniz.

CORS ve JavaScript Hakkında Sık Sorulan Sorular ve Cevaplar

CORS nedir?
CORS, bir web sayfasındaki kısıtlı kaynakların, kaynağın kaynaklandığı etki alanı dışındaki başka bir etki alanından talep edilmesine olanak tanıyan bir mekanizma olan Çapraz Kaynaklı Kaynak Paylaşımı anlamına gelir.
Tarayıcılar neden Aynı Kaynak Politikasını uyguluyor?
Aynı Kaynak Politikası, kullanıcıların verilerini korumak ve kötü amaçlı web sitelerinin diğer alanlardaki hassas bilgilere JavaScript aracılığıyla erişmesini önlemek için uygulanır.
Postacı neden CORS'u uygulamıyor?
Postman, bir tarayıcı olmadığı ve tarayıcı ortamında çalışmadığı için CORS'u zorunlu kılmaz, dolayısıyla Aynı Kaynak Politikasına uyması gerekmez.
Web uygulamamdaki CORS hatasını nasıl çözebilirim?
Bir CORS hatasını çözmek için sunucuyu uygun olanı içerecek şekilde yapılandırın. 'Access-Control-Allow-Origin' yanıtta başlık, istekte bulunan kaynağa izin verir.
Ne yapar 'Access-Control-Allow-Origin' başlık mı?
'Access-Control-Allow-Origin' başlık, hangi kaynakların kaynağa erişmesine izin verildiğini belirtir ve çapraz köken isteklerini etkinleştirir.
Amacı nedir? withCredentials XMLHttpRequest'te mi?
withCredentials özelliği, siteler arası Erişim Kontrolü isteklerinin çerezler veya yetkilendirme başlıkları gibi kimlik bilgileri kullanılarak yapılıp yapılmayacağını belirtir.
Sunucum aşağıdakileri içermesine rağmen neden CORS hatası alıyorum? 'Access-Control-Allow-Origin' başlık?
Aşağıdakiler gibi diğer gerekli CORS başlıkları varsa yine de CORS hatası alabilirsiniz: 'Access-Control-Allow-Methods' veya 'Access-Control-Allow-Headers', eksik veya yanlış yapılandırılmış.
Tarayıcımda CORS'u devre dışı bırakabilir miyim?
Güvenliği tehlikeye atacağı için tarayıcıda CORS'un devre dışı bırakılması önerilmez. Bunun yerine sunucunuzu CORS'u düzgün şekilde işleyecek şekilde yapılandırın.
CORS'ta ön kontrol isteği nedir?
Ön kontrol isteği, gerçek isteğin gönderilmesinin güvenli olup olmadığını belirlemek için tarayıcı tarafından OPTIONS yöntemini kullanarak yapılan ilk istektir. Sunucuda gerekli CORS başlıklarını kontrol eder.

Tartışmayı Sonlandırmak

CORS ve Aynı Köken Politikasının nüanslarını anlamak web geliştiricileri için çok önemlidir. Tarayıcılar kullanıcıları korumak için sıkı güvenlik önlemleri uygularken Postman gibi araçlar bu kısıtlamaları atlayarak API'lerin test edilmesini kolaylaştırır. Geliştiriciler, arka ucu gerekli CORS üstbilgileriyle doğru şekilde yapılandırarak ön uç ile arka uç arasında sorunsuz ve güvenli iletişim sağlayabilir. CORS sorunlarını ele almak, işlevsel ve kullanıcı dostu web uygulamaları oluşturmak için çok önemlidir.