Nessuna intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta. L'origine '...' non è quindi consentito l'accesso

Sto usando .htaccess per riscrivere gli URL e ho usato il tag html di base per farlo funzionare.

Ora, quando provo a fare una richiesta Ajax ricevo il seguente errore:

XMLHttpRequest non può essere caricato http://www.example.com/login.php. Nessuna intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta. http://example.comPertanto all'origine ' ' non è consentito l'accesso.

Usa addHeaderinvece di usare il setHeadermetodo,

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

*nella riga sopra consentirà access to all domains.

Per consentire access to specific domain only:

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

Controllare questo blog post.

Perché viene generato l'errore:

Il codice JavaScript è limitato dalla stessa politica di origine , ovvero da una pagina in www.example.com, è possibile effettuare (AJAX) richieste ai servizi situati esattamente nello stesso dominio, in quel caso esattamente www.example.com( non example.com - senza www- o whatever.example.com).

Nel tuo caso, il tuo codice Ajax sta tentando di raggiungere un servizio http://wordicious.comda una pagina situata in http://www.wordicious.com.

Anche se molto simili, sono non lo stesso dominio. E quando non si trovano nello stesso dominio, la richiesta avrà esito positivo solo se la rispettiva destinazione contiene al suo interno Access-Control-Allow-Originun'intestazione.

Poiché la tua pagina / servizio http://wordicious.comnon è mai stata configurata per presentare tale intestazione, viene visualizzato quel messaggio di errore.

Soluzione:

Come detto, i domini di origine (dove si trova la pagina con JavaScript) e i domini di destinazione (dove JavaScript tenta di raggiungere) devono essere esattamente gli stessi.

Il tuo caso sembra un errore di battitura. Sembra http://wordicious.come in http://www.wordicious.comrealtà sono lo stesso server / dominio. Quindi, per correzione, digitare la destinazione e l'origine altrettanto: ti fanno Ajax richiedono pagine di codice / servizi per http://www.wordicious.comnonhttp://wordicious.com . (Forse posizionare l'URL di destinazione relativamente, come '/login.php', senza il dominio).

Su una nota più generale:

Se il problema non è un errore di battitura come quello di questa domanda sembra essere, la soluzione sarebbe quella di aggiungere il Access-Control-Allow-Origindominio di destinazione . Per aggiungerlo, dipende, ovviamente, dal server / lingua dietro quell'indirizzo. A volte una variabile di configurazione nello strumento farà il trucco. Altre volte dovrai aggiungere le intestazioni tramite il codice da solo.

Per .NET server puoi configurarlo in web.config come mostrato di seguito

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

Ad esempio, diciamo, se il dominio del server è http://live.makemypublication.com e il client è http://www.makemypublication.com, configura nel web.config del server come di seguito

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

Se ricevi questo messaggio di errore dal browser:

Nessuna intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta. L'origine '...' non è quindi consentito l'accesso

quando stai provando a fare una richiesta POST / GET Ajax a un server remoto che è fuori dal tuo controllo, dimentica questa semplice soluzione:

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

Quello che devi veramente fare, specialmente se usi JavaScript solo per fare la richiesta Ajax, è un proxy interno che accetta la tua richiesta e la invia al server remoto.

Prima di tutto nel tuo JavaScript, esegui una chiamata Ajax sul tuo server, qualcosa del tipo:

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

Quindi, crea un semplice file PHP chiamato proxy.php per racchiudere i tuoi dati POST e aggiungerli al server URL remoto come parametri. Ti faccio un esempio di come aggiro questo problema con l'API di ricerca di hotel di 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));
 }

Facendo:

 echo json_encode(file_get_contents($url));

Stai solo eseguendo la stessa query ma sul lato server e, successivamente, dovrebbe funzionare correttamente.

Devi aggiungerlo all'inizio della tua pagina php "login.php"

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

devi inserire le chiavi / i valori delle intestazioni nella risposta del metodo delle opzioni. ad esempio se si dispone di risorse su http://mydomain.com/myresource , nel codice del server si scrive

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



}

Modifica sostanzialmente la risposta dell'intestazione dell'API aggiungendo i seguenti parametri aggiuntivi.

Access-Control-Allow-Credentials: true

Accesso-Controllo-Consenti-Origine: *

Ma questa non è una buona soluzione quando si tratta di sicurezza

Per risolvere il problema, utilizzare un proxy inverso in esecuzione sull'host "sorgente" e inoltrarlo al server di destinazione, ad esempio Fiddler:

Link qui: http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

O un proxy inverso Apache ...

Aggiungi questo al tuo file PHP o controller principale

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

Risolto con la voce seguente in 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}]]

Motivi trovano la funzione utilizzata in XMLHTTPREQUEST in Javascript per impostare le intestazioni della richiesta.

...

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

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