İstenen kaynak hatasında 'Access-Control-Allow-Origin' başlığı yok

Bir haber sitesinin beslemesini almaya çalışıyorum. Feedburner feed'ini json'a dönüştürmek için Google'ın feed API'sini kullanacağımı düşündüm. Aşağıdaki url, beslemeden json biçiminde 10 gönderi döndürecektir. http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

Yukarıdaki url'nin içeriğini almak için aşağıdaki kodu kullandım

$.ajax({
  type: "GET",
  dataType: "jsonp",
  url: "http://ajax.googleapis.com/ajax/services/feed/load",
  data: {
    "v": "1.0",
    "num": "10",
    "q": "http://feeds.feedburner.com/mathrubhumi"
  },
  success: function(result) {
    //.....
  }
});

ama çalışmıyor ve aşağıdaki hatayı alıyorum

XMLHttpRequest http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi yüklenemiyor . İstenen kaynakta 'Access-Control-Allow-Origin' başlığı yok. Bu nedenle ' http: // localhost ' kaynağına erişime izin verilmiyor.

Bunu nasıl düzeltirim?

Bunun muhtemelen Chrome'un localhostgeçmeyi desteklemediğine inanıyorum Access-Control-Allow-Origin- Chrome sorununa bakın

Chrome'un Access-Control-Allow-Originüstbilgiyi göndermesini sağlamak için, / etc / hosts dosyanızdaki localhost'unuzu başka bir etki alanına takma ad verin, örneğin:

127.0.0.1   localhost yourdomain.com

Ardından komut dosyanızı yourdomain.comyerine kullanarak erişirseniz localhost, çağrı başarılı olmalıdır.

Google Chrome tarayıcısı kullanıyorsanız, bir uzantı ile hackleyebilirsiniz.

Uygulamanızda CORS başlıklarını anında değiştirecek bir Chrome uzantısı bulabilirsiniz . Açıkçası, bu yalnızca Chrome, ancak hiçbir yerde sıfır değişiklikle çalışmasını seviyorum.

Yerel bir makinede uygulamanızda hata ayıklamak için kullanabilirsiniz (her şey üretimde çalışıyorsa).

Uyarı : URL bozulursa, uzantı adı Access-Control-Allow-Origin: * olur . Eşyalarınız üzerinde çalışmadığınız zamanlarda bu uzantıyı devre dışı bırakmanızı tavsiye ederim, çünkü örneğin youtube bu uzantı ile çalışmaz.

Bunu deneyin - başlığı aşağıdaki gibi ayarlayarak Ajax çağrısını ayarlayın:

var uri = "http://localhost:50869/odata/mydatafeeds"
$.ajax({
    url: uri,
    beforeSend: function (request) {
        request.setRequestHeader("Authorization", "Negotiate");
    },
    async: true,
    success: function (data) {
        alert(JSON.stringify(data));
    },
    error: function (xhr, textStatus, errorMessage) {
        alert(errorMessage);
    }                
});

Ardından, aşağıdaki komut satırıyla Chrome'u açarak kodunuzu çalıştırın:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Bilginize, bu konu için geçerli olduğuna inandığım jQuery belgelerinden bu bilgiyi fark ettim:

Tarayıcı güvenlik kısıtlamaları nedeniyle, çoğu "Ajax" isteği aynı menşe politikasına tabidir ; istek, farklı bir etki alanı, alt etki alanı, bağlantı noktası veya protokolden başarıyla veri alamaz.

@Thanix gibi hosts dosyasını değiştirmek benim için işe yaramadı, ancak @dkruchok tarafından belirtilen uzantı sorunu çözdü.

Chrome, iki farklı localhost'u entegre etmenize izin vermiyor, bu yüzden bu hatayı alıyoruz. NuGet yöneticisinden Microsoft Visual Studio Web Api Core paketini dahil etmeniz ve WebApi projelerinde WebApiConfig.cs dosyanıza iki satırlık kod eklemeniz yeterlidir .

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Sonra hepsi bitti.

Bahar önyükleme servisi çağırıyorsa. aşağıdaki kodu kullanarak halledebilirsiniz.

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS")
                    .allowedHeaders("*", "Access-Control-Allow-Headers", "origin", "Content-type", "accept", "x-requested-with", "x-requested-by") //What is this for?
                    .allowCredentials(true);
        }
    };
}

Geliştirme için https://cors-anywhere.herokuapp.com'u kullanabilirsiniz , çünkü üretim için kendi proxy'nizi kurmak daha iyidir

async function read() {
   let r= await (await fetch('https://cors-anywhere.herokuapp.com/http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi')).json();
   console.log(r);
}

read();

cors unblock, chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino için harika çalışıyor

"cors unblock" adlı bir google chrome eklentisidir

Özet: Etkinleştirildiğinde yerel ve uzak web isteklerine 'Access-Control-Allow-Origin: *' başlığını ekleyerek artık CORS hatası yok

Bu uzantı, tarayıcının aldığı her isteğe özel "erişim-kontrol-izin-kaynak" ve "erişim-kontrol-izin-yöntemleri" başlıkları sağlayarak XMLHttpRequest ve getirme yöntemleri üzerinde kontrol sağlar. Kullanıcı, uzantıyı araç çubuğu düğmesinden açıp kapatabilir. Bu başlıkların nasıl değiştirildiğini değiştirmek için sağ tıklama bağlam menüsü öğelerini kullanın. Hangi yönteme izin verileceğini özelleştirebilirsiniz. Varsayılan seçenek 'GET', 'PUT', 'POST', 'DELETE', 'HEAD', 'OPTIONS', 'PATCH' yöntemlerine izin vermektir. Ayrıca, sunucu zaten bunları doldurduğunda uzantıdan bu başlıkların üzerine yazmamasını isteyebilirsiniz.

peki, başka bir yol da cors proxy kullanmanın, URL'nizden önce https://cors-anywhere.herokuapp.com/ eklemeniz yeterli. yani URL'niz https://cors-anywhere.herokuapp.com/http gibi olacaktır : //ajax.googleapis.com/ajax/services/feed/load .

Proxy sunucusu http://ajax.googleapis.com/ajax/services/feed/load adresini yukarıdaki URL'den alır. Ardından, o sunucunun yanıtını alma talebinde bulunur. Ve son olarak, proxy,

Access-Control-Allow-Origin: *

o orijinal yanıta.

Bu çözüm harika çünkü hem geliştirme hem de üretimde çalışıyor. Özetle, aynı kaynak politikasının yalnızca tarayıcıdan sunucuya iletişimde uygulandığı gerçeğinden yararlanıyorsunuz. Bu, sunucudan sunucuya iletişimde zorlanması gerekmediği anlamına gelir!

CORS Hatasını Düzeltmenin Orta 3 Yolunda çözüm hakkında daha fazla bilgiyi burada bulabilirsiniz

Kullanın @CrossOriginüzerinde backendsideKrom hata çözüm olarak Yay önyükleme denetleyicisi (her iki sınıf düzeyi ya da yöntem seviyesi) 'No 'Access-Control-Allow-Origin'başlığında istenen kaynak üzerinde mevcuttur.'

Bu çözüm benim için% 100 çalışıyor ...

Örnek: Sınıf seviyesi

@CrossOrigin
@Controller
public class UploadController {

----- VEYA -------

Örnek: Yöntem düzeyi

@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
@RequestMapping(value = "/loadAllCars")
    @ResponseBody
    public List<Car> loadAllCars() {


Ref: https://spring.io/blog/2015/06/08/cors-support-in-spring-framework