Tidak ada header 'Access-Control-Allow-Origin' yang ada di resource yang diminta. Oleh karena itu, asal '…' tidak diizinkan mengakses

Saya menggunakan .htaccess untuk menulis ulang url dan saya menggunakan tag dasar html untuk membuatnya berfungsi.

Sekarang, ketika saya mencoba membuat permintaan ajax saya mendapatkan kesalahan berikut:

XMLHttpRequest tidak dapat dimuat http://www.example.com/login.php. Tidak ada header 'Access-Control-Allow-Origin' yang ada di resource yang diminta. Asal ' http://example.com' karena itu tidak diizinkan akses.

Gunakan addHeaderDaripada menggunakan setHeadermetode,

response.addHeader("Access-Control-Allow-Origin", "*");

*di baris atas akan memungkinkan access to all domains.

Untuk mengizinkan access to specific domain only:

response.addHeader("Access-Control-Allow-Origin", "http://www.example.com");

Periksa ini blog post.

Mengapa kesalahan dimunculkan:

Kode JavaScript dibatasi oleh kebijakan asal yang sama , artinya, dari laman di www.example.com, Anda hanya dapat membuat permintaan (AJAX) ke layanan yang terletak di domain yang persis sama, dalam hal ini, persis www.example.com( bukan example.com - tanpa www- atau whatever.example.com).

Dalam kasus Anda, kode Ajax Anda mencoba menjangkau layanan http://wordicious.comdari halaman yang terletak di http://www.wordicious.com.

Meski sangat mirip, mereka bukan domain yang sama. Dan jika mereka tidak berada di domain yang sama, permintaan hanya akan berhasil jika tanggapan target berisi Access-Control-Allow-Originheader di dalamnya.

Karena halaman / layanan Anda di http://wordicious.comtidak pernah dikonfigurasi untuk menampilkan header seperti itu, pesan kesalahan itu akan ditampilkan.

Larutan:

Seperti yang dikatakan, domain asal (tempat halaman dengan JavaScript berada) dan domain target (tempat JavaScript mencoba menjangkau) harus sama persis .

Kasus Anda sepertinya salah ketik. Sepertinya http://wordicious.comdan http://www.wordicious.comsebenarnya adalah server / domain yang sama. Jadi untuk memperbaikinya, ketik target dan asal sama-sama: membuat Anda meminta kode Ajax halaman / layanan untuk http://www.wordicious.comtidakhttp://wordicious.com . (Mungkin tempatkan URL target secara relatif, seperti '/login.php', tanpa domain).

Pada catatan yang lebih umum:

Jika masalahnya bukan kesalahan ketik seperti yang tampaknya menjadi salah satu pertanyaan ini, solusinya adalah menambahkan Access-Control-Allow-Originke domain target . Untuk menambahkannya, tentu saja bergantung pada server / bahasa di balik alamat itu. Terkadang variabel konfigurasi di alat akan melakukan triknya. Di lain waktu Anda harus menambahkan sendiri header melalui kode.

Untuk server .NET dapat mengkonfigurasi ini di web.config seperti gambar di bawah ini

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="your_clientside_websiteurl" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>

Misalnya, jika domain server adalah http://live.makemypublication.com dan klien adalah http://www.makemypublication.com maka konfigurasikan di web.config server seperti di bawah ini

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="http://www.makemypublication.com" />
     </customHeaders>
  </httpProtocol>
 </system.webServer>

Jika Anda mendapatkan pesan kesalahan ini dari browser:

Tidak ada header 'Access-Control-Allow-Origin' yang ada di resource yang diminta. Oleh karena itu, asal '…' tidak diizinkan mengakses

ketika Anda mencoba melakukan permintaan Ajax POST / GET ke server jarak jauh yang di luar kendali Anda, lupakan tentang perbaikan sederhana ini:

<?php header('Access-Control-Allow-Origin: *'); ?>

Apa yang benar-benar perlu Anda lakukan, terutama jika Anda hanya menggunakan JavaScript untuk melakukan permintaan Ajax, adalah proxy internal yang mengambil kueri Anda dan mengirimkannya ke server jauh.

Pertama di JavaScript Anda, lakukan panggilan Ajax ke server Anda sendiri, seperti:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async:false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Kemudian, buat file PHP sederhana bernama proxy.php untuk membungkus data POST Anda dan menambahkannya ke server URL jarak jauh sebagai parameter. Saya memberi Anda contoh bagaimana saya melewati masalah ini dengan API pencarian Hotel Expedia:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

Dengan melakukan:

 echo json_encode(file_get_contents($url));

Anda hanya melakukan kueri yang sama tetapi di sisi server dan setelah itu, seharusnya berfungsi dengan baik.

Anda perlu menambahkan ini di awal halaman php Anda "login.php"

<?php header('Access-Control-Allow-Origin: *'); ?>

Anda harus meletakkan kunci / nilai header dalam respon metode opsi. misalnya jika Anda memiliki sumber daya di http://mydomain.com/myresource lalu, di kode server Anda tulis

//response handler
void handleRequest(Request request, Response response) {
    if(request.method == "OPTIONS") {
       response.setHeader("Access-Control-Allow-Origin","http://clientDomain.com")
       response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
       response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    }



}

Pada dasarnya, ubah respons header API dengan menambahkan parameter tambahan berikut.

Access-Control-Allow-Credentials: benar

Access-Control-Allow-Origin: *

Tapi ini bukan solusi yang baik dalam hal keamanan

Solusinya adalah dengan menggunakan proxy terbalik yang berjalan di host 'sumber' Anda dan meneruskan ke server target Anda, seperti Fiddler:

Tautkan di sini: http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

Atau proxy Apache Reverse ...

Tambahkan ini ke Anda file PHP atau pengontrol utama

header("Access-Control-Allow-Origin: http://localhost:9000");

Diselesaikan dengan entri di bawah ini di httpd.conf

#CORS Issue
Header set X-Content-Type-Options "nosniff"
Header always set Access-Control-Max-Age 1728000
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT,PATCH"
Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,Content-Type,Origin,Authentication,Authorization,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control"
Header always set Access-Control-Allow-Credentials true

#CORS REWRITE
RewriteEngine On                  
RewriteCond %{REQUEST_METHOD} OPTIONS 
#RewriteRule ^(.*)$ $1 [R=200,L]
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]

Silakan temukan Fungsi yang digunakan dalam XMLHTTPREQUEST di Javascript untuk menyiapkan header permintaan.

...

xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "http://www.example.com");
...
</script>

Referensi: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader