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