No hay un encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen '...'

Estoy usando .htaccess para reescribir las URL y usé la etiqueta base html para que funcione.

Ahora, cuando intento realizar una solicitud ajax, aparece el siguiente error:

XMLHttpRequest no se puede cargar http://www.example.com/login.php. No hay ningún encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Origen ' http://example.com', por lo tanto, no se permite el acceso.

Use addHeaderEn lugar de usar el setHeadermétodo,

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

*en la línea anterior lo permitirá access to all domains.

Por permitir access to specific domain only:

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

Mira esto blog post.

Por qué se genera el error:

El código JavaScript está limitado por la política del mismo origen , lo que significa que desde una página en www.example.com, solo puede realizar solicitudes (AJAX) a servicios ubicados exactamente en el mismo dominio, en ese caso, exactamente www.example.com( no example.com - sin www- o whatever.example.com).

En su caso, su código Ajax está intentando acceder a un servicio http://wordicious.comdesde una página ubicada en http://www.wordicious.com.

Aunque muy similares, son no el mismo dominio. Y cuando no están en el mismo dominio, la solicitud solo tendrá éxito si la respuesta del objetivo contiene un Access-Control-Allow-Originencabezado.

Como su página / servicio http://wordicious.comnunca se configuró para presentar dicho encabezado, se muestra ese mensaje de error.

Solución:

Como se dijo, los dominios de origen (donde está la página con JavaScript) y de destino (donde JavaScript está tratando de llegar) deben ser exactamente los mismos.

Su caso parece un error tipográfico. Parece http://wordicious.comy http://www.wordicious.comson en realidad el mismo servidor / dominio. Así que para fijar, escriba el destino y el origen por igual: hacerte Ajax páginas de solicitud de código / servicios que http://www.wordicious.comnohttp://wordicious.com . (Tal vez coloque la URL de destino relativamente, como '/login.php', sin el dominio).

En una nota más general:

Si el problema no es un error tipográfico como parece ser el de esta pregunta, la solución sería agregar el Access-Control-Allow-Original dominio de destino . Para agregarlo, depende, por supuesto, del servidor / idioma detrás de esa dirección. A veces, una variable de configuración en la herramienta funcionará. Otras veces tendrá que agregar los encabezados a través del código usted mismo.

Para el servidor .NET puede configurar esto en web.config como se muestra a continuación

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

Por ejemplo, digamos, si el dominio del servidor es http://live.makemypublication.com y el cliente es http://www.makemypublication.com , configure en web.config del servidor como se muestra a continuación

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

Si recibe este mensaje de error del navegador:

No hay un encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen '...'

cuando intente hacer una solicitud Ajax POST / GET a un servidor remoto que está fuera de su control, olvídese de esta sencilla solución:

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

Lo que realmente necesita hacer, especialmente si solo usa JavaScript para hacer la solicitud Ajax, es un proxy interno que toma su consulta y la envía al servidor remoto.

Primero en su JavaScript, haga una llamada Ajax a su propio servidor, algo como:

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

Luego, cree un archivo PHP simple llamado proxy.php para envolver sus datos POST y agregarlos al servidor URL remoto como parámetros. Te doy un ejemplo de cómo evito este problema con la API de búsqueda de hoteles de 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));
 }

Haciendo:

 echo json_encode(file_get_contents($url));

Simplemente está haciendo la misma consulta pero en el lado del servidor y después de eso, debería funcionar bien.

Necesita agregar esto al comienzo de su página php "login.php"

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

tienes que poner las claves / valores de los encabezados en la respuesta del método de opciones. por ejemplo, si tiene un recurso en http://mydomain.com/myresource , entonces, en el código de su servidor, escriba

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



}

Básicamente, modifique la respuesta del encabezado de la API agregando los siguientes parámetros adicionales.

Access-Control-Allow-Credentials: verdadero

Acceso-Control-Permitir-Origen: *

Pero esta no es una buena solución cuando se trata de seguridad.

La solución alternativa es utilizar un proxy inverso que se ejecuta en su host de 'origen' y reenvía a su servidor de destino, como Fiddler:

Enlace aquí: http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

O un proxy inverso de Apache ...

Agregue esto a su archivo PHP o controlador principal

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

Resuelto con la siguiente entrada en 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}]]

Por favor, busque la función utilizada en XMLHTTPREQUEST en Javascript para configurar los encabezados de solicitud.

...

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

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