Tidak ada header 'Access-Control-Allow-Origin' pada kesalahan sumber daya yang diminta

Saya mencoba mengambil feed dari situs berita. Pikir saya akan menggunakan API umpan Google untuk mengubah umpan feedburner menjadi json. Url berikut akan mengembalikan 10 posting dari feed, dalam format json. http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

Saya menggunakan kode berikut untuk mendapatkan isi url di atas

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

tetapi tidak berfungsi dan saya mendapatkan kesalahan berikut

XMLHttpRequest tidak dapat memuat http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedburner.com%2Fmathrubhumi . Tidak ada header 'Access-Control-Allow-Origin' yang ada di resource yang diminta. Oleh karena itu, asal ' http: // localhost ' tidak diizinkan untuk diakses.

Bagaimana cara mengatasinya?

Saya yakin ini mungkin karena Chrome tidak mendukung localhostuntuk melalui Access-Control-Allow-Origin- lihat masalah Chrome

Agar Chrome mengirim Access-Control-Allow-Originheader, cukup alias localhost Anda di file / etc / hosts Anda ke beberapa domain lain, seperti:

127.0.0.1   localhost yourdomain.com

Kemudian jika Anda akan mengakses skrip Anda menggunakan yourdomain.com alih-alihlocalhost , panggilan akan berhasil.

Jika Anda menggunakan browser Google Chrome, Anda dapat meretas dengan ekstensi.

Anda dapat menemukan ekstensi Chrome yang akan mengubah tajuk CORS dengan cepat di aplikasi Anda. Jelas, ini hanya Chrome, tapi saya suka itu berfungsi tanpa perubahan di mana pun sama sekali.

Anda dapat menggunakannya untuk men-debug aplikasi Anda pada mesin lokal (jika semuanya berfungsi dalam produksi).

Pemberitahuan : Jika URL rusak, nama ekstensi adalah Access-Control-Allow-Origin: * . Saya menyarankan Anda untuk menonaktifkan ekstensi ini ketika Anda tidak mengerjakan barang Anda, karena, misalnya, youtube tidak berfungsi dengan ekstensi ini.

Coba ini - atur panggilan Ajax dengan mengatur header sebagai berikut:

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

Kemudian jalankan kode Anda dengan membuka Chrome dengan baris perintah berikut:

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

Untuk diketahui, saya melihat informasi ini dari dokumentasi jQuery yang menurut saya berlaku untuk masalah ini:

Karena batasan keamanan browser, sebagian besar permintaan "Ajax" tunduk pada kebijakan asal yang sama ; permintaan tidak berhasil mengambil data dari domain, subdomain, port, atau protokol yang berbeda.

Mengubah file host seperti @thanix tidak berhasil untuk saya, tetapi ekstensi yang disebutkan oleh @dkruchok memang menyelesaikan masalah.

Chrome tidak mengizinkan Anda untuk mengintegrasikan dua localhost yang berbeda, itulah mengapa kami mendapatkan kesalahan ini. Anda hanya perlu memasukkan paket Microsoft Visual Studio Web Api Core dari nuget manager. Dan menambahkan dua baris kode di proyek WebApi di WebApiConfig.cs file Anda .

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

Kemudian semuanya selesai.

Jika memanggil layanan boot musim semi. Anda dapat mengatasinya menggunakan kode di bawah ini.

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

Untuk pengembangan Anda dapat menggunakan https://cors-anywhere.herokuapp.com , untuk produksi lebih baik mengatur proxy Anda sendiri

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 bekerja sangat baik untuk chrome 78 [COrs unb] [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

itu adalah plugin untuk google chrome yang disebut "cors unblock"

Ringkasan: Tidak ada lagi kesalahan CORS dengan menambahkan header 'Access-Control-Allow-Origin: *' ke permintaan web lokal dan jarak jauh saat diaktifkan

Ekstensi ini memberikan kontrol atas XMLHttpRequest dan metode pengambilan dengan menyediakan header "access-control-allow-origin" dan "access-control-allow-methods" khusus untuk setiap permintaan yang diterima browser. Pengguna dapat mengaktifkan dan menonaktifkan ekstensi dari tombol toolbar. Untuk mengubah bagaimana tajuk ini diubah, gunakan item menu konteks klik kanan. Anda dapat menyesuaikan metode apa yang diperbolehkan. Opsi defaultnya adalah mengizinkan metode 'GET', 'PUT', 'POST', 'DELETE', 'HEAD', 'OPTIONS', 'PATCH'. Anda juga dapat meminta ekstensi untuk tidak menimpa header ini ketika server sudah mengisinya.

Nah, cara lain adalah menggunakan cors proxy, Anda hanya perlu menambahkan https://cors-anywhere.herokuapp.com/ sebelum URL Anda. sehingga URL Anda akan seperti https://cors-anywhere.herokuapp.com/http : //ajax.googleapis.com/ajax/services/feed/load .

Server proxy menerima http://ajax.googleapis.com/ajax/services/feed/load dari URL di atas. Kemudian itu membuat permintaan untuk mendapatkan respons server itu. Dan terakhir, proxy menerapkan

Access-Control-Allow-Origin: *

untuk tanggapan asli itu.

Solusi ini sangat bagus karena berfungsi dalam pengembangan dan produksi. Singkatnya, Anda memanfaatkan fakta bahwa kebijakan asal yang sama hanya diterapkan dalam komunikasi browser-ke-server. Yang berarti itu tidak harus diterapkan dalam komunikasi server-ke-server!

Anda dapat membaca lebih lanjut tentang solusi di sini di Medium 3 Cara Memperbaiki Kesalahan CORS

Harap gunakan @CrossOriginpada backendsidepengontrol boot Spring (baik tingkat kelas atau tingkat metode) karena solusi untuk 'No 'Access-Control-Allow-Origin'header kesalahan Chrome ada pada sumber daya yang diminta. '

Solusi ini bekerja untuk saya 100% ...

Contoh: Tingkat kelas

@CrossOrigin
@Controller
public class UploadController {

----- ATAU -------

Contoh: Level metode

@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