Flask-React Uygulamalarında CORS Sorunlarını Çözme

Flask-React Uygulamalarında CORS Sorunlarını Çözme

Merhaba! Flask ve React kullanarak bir web uygulaması geliştiriyorsanız, muhtemelen “CORS” hatasıyla karşılaşmışsınızdır. CORS, kısaca “Cross-Origin Resource Sharing” (Çapraz Köken Kaynak Paylaşımı) anlamına gelir ve tarayıcıların güvenlik nedeniyle farklı domain’lerden gelen istekleri engellemesiyle ortaya çıkar. Bu makalede, bu sorunu nasıl çözeceğinizi adım adım açıklayacağım. Öncelikle, sorunun nedenini ve çözüm yollarını inceleyelim. Sonrasında da pratik örneklerle konuyu pekiştirelim.

CORS Hatasının Nedeni

React uygulamanız (örneğin, localhost:3000 adresinde çalışan) Flask sunucunuza (örneğin, localhost:5000 adresinde çalışan) bir API isteği gönderdiğinde, tarayıcı bu isteği engeller. Çünkü istek farklı bir domain’den geliyor. Bu, güvenlik açısından önemli bir önlemdir. Ancak, uygulamanızın düzgün çalışması için bu engeli aşmamız gerekmektedir.

CORS Sorununu Çözmek İçin Yöntemler

Neyse ki, bu sorunu çözmek için birkaç farklı yol mevcuttur. En yaygın yöntemlerden biri, Flask tarafında uygun CORS başlıklarını ayarlamak olacaktır. Bunun için çeşitli paketler kullanabiliriz. Örneğin, flask-cors paketi oldukça popüler ve kullanımı kolaydır.

Flask-CORS Paketini Kullanma

İlk olarak, flask-cors paketini projenize kurmalısınız:

pip install flask-cors

Ardından, Flask uygulamanıza aşağıdaki gibi eklemeler yapabilirsiniz:

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # Tüm origin'lere izin ver

@app.route('/api/data')
def get_data():
    data = {'message': 'Merhaba, React dünyasından gelenler!'}
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)

Bu kod, CORS nesnesini Flask uygulamasına ekleyerek tüm domain’lerden gelen isteklere izin verir. Ancak, güvenlik açısından sadece belirli domain’lere izin vermek daha iyidir. Bu durumu, CORS nesnesinin origins parametresini kullanarak sağlayabiliriz. Örneğin:

CORS(app, origins=['http://localhost:3000'])

Bu kod, sadece http://localhost:3000 adresinden gelen isteklere izin verir. Unutmayın, geliştirme aşamasında localhost kullanırken, üretim ortamında gerçek domain adresinizi kullanmalısınız.

Proxy Sunucusu Kullanımı

Alternatif olarak, React uygulamanızın isteklerini bir proxy sunucusu üzerinden yönlendirerek CORS sorununu aşabilirsiniz. Bu, özellikle geliştirme aşamasında faydalıdır. React’in proxy özelliğini kullanarak bunu yapılandırabilirsiniz.

React’in package.json dosyasında, proxy alanını aşağıdaki gibi ayarlayabilirsiniz:

{
  "proxy": "http://localhost:5000"
}

Bu şekilde, React uygulamanız tüm istekleri localhost:5000 adresine yönlendirecek ve CORS hatasını önleyecektir. Daha detaylı bilgi için Create React App proxy dokümanına bakabilirsiniz.

Önemli Notlar ve Güvenlik

Geliştirme aşamasında CORS(app) kullanmak pratiktir, ancak üretim ortamında mutlaka belirli origin’ler belirtmelisiniz. Akıllı telefonunuz, tabletiniz veya bilgisayardaki tüm uygulamaların sunucunuza erişmesine izin vermek güvenlik açısından büyük bir risk oluşturur. Her zaman güvenliği önceliklendirin. Daha fazla bilgi için kendi bloğuma göz atabilirsiniz: fatihsoysal.com

Umarım bu makale size yardımcı olmuştur. Başka sorularınız varsa, yorum bölümünden bana ulaşabilirsiniz!

#Etiketler: CORS, Flask, React, Cross-Origin Resource Sharing, API, hata çözümü, web geliştirme, flask-cors, proxy, güvenlik