İstenen kaynakta 'Access-Control-Allow-Origin' başlığı yok. '…' Kaynağının bu nedenle erişime izin verilmiyor

URL'leri yeniden yazmak için .htaccess kullanıyorum ve çalışmasını sağlamak için html base etiketi kullandım.

Şimdi, bir ajax isteği yapmaya çalıştığımda aşağıdaki hatayı alıyorum:

XMLHttpRequest yüklenemiyor http://www.example.com/login.php. İstenen kaynakta 'Access-Control-Allow-Origin' başlığı yok. http://example.comBu nedenle ' ' kaynağına erişim izni verilmiyor.

Kullanım Yöntemi addHeaderkullanmak yerine setHeader,

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

*yukarıdaki satır izin verir access to all domains.

İzin vermek için access to specific domain only:

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

Bunu kontrol et blog post.

Hata neden ortaya çıkıyor:

JavaScript kodu ile sınırlıdır aynı kaynak politikası bir sayfadan, yani www.example.comyalnızca bulunan servislere (AJAX) isteklerini yapabilir aynen aynen, bu durumda, aynı etki www.example.com( değil example.com - olmadan www- ya whatever.example.com).

Sizin durumunuzda, Ajax kodunuz http://wordicious.comadresindeki bir sayfadan bir hizmete ulaşmaya çalışıyor http://www.wordicious.com.

Çok benzer olmalarına rağmen aynı alan adı değillerdir . Ve aynı alan adında olmadıklarında, istek yalnızca hedefin çağrısının içinde bir Access-Control-Allow-Originbaşlık varsa başarılı olur .

Adresindeki sayfanız / hizmetiniz http://wordicious.comhiçbir zaman böyle bir üstbilgi gösterecek şekilde yapılandırılmadığından, bu hata mesajı gösterilir.

Çözüm:

Daha önce de belirtildiği gibi, başlangıç ​​noktası (JavaScript içeren sayfanın bulunduğu yer) ve hedef (JavaScript'in erişmeye çalıştığı yer) alanları tam olarak aynı olmalıdır .

Vakanız bir yazım hatası gibi görünüyor. Görünüşe göre http://wordicious.comve http://www.wordicious.comaslında aynı sunucu / etki alanı. : Yani düzeltme için eşit hedef ve kökenini yazın size Ajax kod isteği sayfaları / hizmetler yapmak http://www.wordicious.comdeğilhttp://wordicious.com . (Hedef URL'yi '/login.php'alan adı olmadan nispeten yerleştirebilirsiniz ).

Daha genel bir not:

Sorun, bu sorudaki gibi bir yazım hatası değilse, çözüm , hedef etki alanına eklemekAccess-Control-Allow-Origin olacaktır . Eklemek, elbette, bu adresin arkasındaki sunucuya / dile bağlıdır. Bazen araçtaki bir yapılandırma değişkeni hile yapar. Diğer durumlarda, başlıkları kod yoluyla kendiniz eklemeniz gerekir.

.NET sunucusu bunu web.config içinde aşağıda gösterildiği gibi yapılandırabilir

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

Örneğin, sunucu etki alanı http://live.makemypublication.com ve istemci http://www.makemypublication.com ise sunucunun web.config dosyasında aşağıdaki gibi yapılandırın

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

Bu hata mesajını tarayıcıdan alırsanız:

İstenen kaynakta 'Access-Control-Allow-Origin' başlığı yok. '…' Kaynağının bu nedenle erişime izin verilmiyor

kontrolünüz dışındaki bir uzak sunucuya Ajax POST / GET isteği yapmaya çalışırken, lütfen bu basit düzeltmeyi unutun:

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

Özellikle Ajax isteğini yapmak için yalnızca JavaScript kullanıyorsanız, yapmanız gereken şey, sorgunuzu alan ve uzak sunucuya gönderen dahili bir proxy'dir.

İlk önce JavaScript'inizde, kendi sunucunuza bir Ajax çağrısı yapın, şunun gibi:

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

Ardından, POST verilerinizi sarmak ve bunları uzak URL sunucusuna parametre olarak eklemek için proxy.php adlı basit bir PHP dosyası oluşturun. Size Expedia Hotel arama API'sı ile bu sorunu nasıl atladığımın bir örneğini veriyorum:

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

Yaparak:

 echo json_encode(file_get_contents($url));

Sadece aynı sorguyu yapıyorsunuz ama sunucu tarafında ve bundan sonra iyi çalışıyor.

Bunu php sayfanızın "login.php" başlangıcına eklemeniz gerekir

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

seçenekler yöntemi yanıtına üstbilgi anahtarlarını / değerlerini koymanız gerekir. örneğin http://alanadim.com/alanim adresinde kaynak varsa , sunucu kodunuza

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



}

Temel olarak aşağıdaki ek parametreler ekleyerek API üstbilgisi yanıtını değiştirin.

Access-Control-Allow-Credentials: doğru

Erişim-Kontrol-İzin Ver-Menşei: *

Ancak güvenlik söz konusu olduğunda bu iyi bir çözüm değildir

Çözüm, 'kaynak' ana bilgisayarınızda çalışan ve Fiddler gibi hedef sunucunuza yönlendiren bir ters proxy kullanmaktır:

Buraya bağla: http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

Ya da Apache Ters proxy'si ...

Bunu PHP dosyasına veya ana denetleyiciye ekle

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

Httpd.conf dosyasına aşağıdaki giriş ile çözüldü

#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}]]

Pleaes istek başlıklarını ayarlamak için Javascript XMLHTTPREQUEST kullanılan işlevi bulur.

...

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

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