Ajax kullanarak veri çekme
Aşağıdaki kod bloğundan uzaktan veri çekmeye çalışıyorum ama error hatası veriyor verileri listeyemiyorum hata da göremiyorum açıkcası. Yardımcı olursanız sevinirim :)
$.ajax({
url: 'http://application.yesilyurtavm.com/yesilyurtapi/stores.php',
xhrFields: {
withCredentials: false
},
headers: {
"Access-Control-Allow-Origin: ": "*",
"Access-Control-Allow-Methods: ": "GET",
"Access-Control-Allow-Headers: ": "Authorization",
},
type: "GET", /* or type:"GET" or type:"PUT" */
contentType: "application/json",
dataType: "json",
success: function (data) {
console.log(data);
},
error: function () {
console.log("error");
}
});
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (9)
Karşı sunucu ajax isteklerine izin vermediği için dışarıdan bu hatayı alıyorsun.
Yapabileceğin en basit çözüm ücretsiz bir proxy server kullanmak olabilir.
Ben genelde https://cors-anywhere.herokuapp.com/ bunu kullanıyorum.
Yani kodun şöyle olmalı;
$.get('https://cors-anywhere.herokuapp.com/http://application.yesilyurtavm.com/yesilyurtapi/stores.php', function(response){
console.log(response);
});
NOT: sorun sadece jquery ile ilgili, ben etiketlerini düzeltmiştim ancak tekrar etiketleri alakasız şekilde işaretlemişsin. Lütfen bir dahaki sefere daha dikkatli ol ve sadece sorunun ile alakalı etiketleri işaretle.
Kısaca ben kendi sunucumu yorarken sen tarayı tarafından sürekli istek atarak benim sunucumu yorma eğer benden gerçekten bir bilgiye ihtiyaç duyuyor isen sende kendi sunucunu biraz yorki boşu boşuna istek atma bana demiş oluyorsun bir nevi
http://application.yesilyurtavm.com/yesilyurtapi/stores.php Sitesi, sayfanın başına şu kodu eklemiş olsaydı eğer
header( 'Access-Control-Allow-Origin: *' );
Ajax isteklerinde bir problem yaşamayacaktın
Buradan veriyi şu şekilde alabilirsin önce kendi sunucunda veri-al.php adında bir dosya oluştur ve file_get_contents ile bu sitedeki veriyi geri döndür daha sonra kendisiten.com/ver-al.php dosyasına ajax isteği gönderebilirsin
localhost üzerinde çalıştığında örneğin http://localhost/proje1/ alanında çalışırken http://localhost/baska-proje/veri-al.php dosyasına istek gönderdiğindede bu hataya düşersin tarayıcı bunu izin vermeyen başka bir site olarak görür taki "veri-al.php" dosyasının başında "Access-Control-Allow-Origin" izini verene dek
Bilgi 1:
("Access-Control-Allow-Origin": "*") tüm sitelere izin ver demek oluyor yıldız yerine bir domain adı girerek sadece o domaine izin verebilirisin veya bir kaç domain'e
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
Bilgi 2:
Tarayıcının bu özelliğini manipüle etmek istiyor isen chrome için şöyle bir eklenti var eklentiyi etkinleştirerek izin vermeyen sitelere ajax isteği yapabilirsin
Eklentinin yaptığı şey aslında Siteden dönen başlıkların arasına "Access-Control-Allow-Origin" eklemek, ajax bu değeri kontrol ediyor ve var olduğunu görünce izin veriyor
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=tr
CORS olayı her zaman insanın başına bela olmuştur :) Bazen kendi sunucunda bile aynı adrese istek atarken problem yaşayabilirsin, server-side çözümler için şu sayfaya bakabilirsin
https://enable-cors.org/index.html
ama bazen bunlar bile çözüm olmuyor, bir başkasının senin sayfana istek atmasını istemezsin sonuçta :) bu gibi durumlarda da proxy serverlar kullanıyor, kendi proxy serverını da yazabilirsin ama biraz zaman ve tecrübe istiyor.
şimdi de böyle bir hata ile karşılaşıyorum;
Access to XMLHttpRequest at 'http://application.yesilyurtavm.com/yesilyurtapi/stores.php' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Öncelikle bir daha lütfen konuya ait olmayan şeyi etiketleme bu css ile ne alakası var bir daha
sakın yapma senin istediğin gelince şu şekilde dene.
$.ajax({
url: 'http://application.yesilyurtavm.com/yesilyurtapi/stores.php',
type: 'get',
succcess: function(ans){
let ans_json = JSON.parse(ans);
console.log(ans_json);
}
});