javascript - ejemplo - Ningún encabezado ''Access-Control-Allow-Origin'' está presente en el recurso solicitado. El origen ''...'' no está, por lo tanto, permitido

xmlhttprequest object

Question

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

Ahora, cuando intento hacer una solicitud de Ajax recibo el siguiente error:

XMLHttpRequest no puede cargar http://www.wordicious.com/login.php . Ningún encabezado ''Access-Control-Allow-Origin'' está presente en el recurso solicitado. El origen '' http://wordicious.com '' no está, por lo tanto, permitido.

Answer 1

Por qué se produce el error:

El código JavaScript está limitado por la misma política de origen , es decir, 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á tratando de llegar a un servicio en http://wordicious.com desde una página ubicada en http://www.wordicious.com .

Aunque son muy similares, no son del mismo dominio. Y cuando no están en el mismo dominio, la solicitud solo será exitosa si la restauración del objetivo contiene un encabezado Access-Control-Allow-Origin .

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

Solución:

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

Tu caso parece un error tipográfico. Parece que http://wordicious.com y http://www.wordicious.com son en realidad el mismo servidor / dominio. Por lo tanto, para corregir, escriba el destino y el origen por igual: haga que las páginas / servicios de solicitud de código Ajax sean http://www.wordicious.com no http://wordicious.com . (Tal vez coloque la URL objetivo relativamente, como ''/login.php'' , sin el dominio).

En una nota más general:

Si el problema no es un error tipográfico como el de esta pregunta, la solución sería agregar Access-Control-Allow-Origin al 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 hará el truco. Otras veces tendrá que agregar los encabezados a través del código usted mismo.

Answer 2

Añádelo a tu archivo PHP o al controlador principal

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

Answer 3

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

Access-Control-Allow-Credentials: cierto

Access-Control-Allow-Origin: *

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

Answer 4

Debe agregar esto al inicio de su página php "login.php"

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

Answer 5

La solución consiste en utilizar un proxy inverso que se ejecuta en su host ''fuente'' y reenviarlo a su servidor de destino, como Fiddler:

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

O un proxy inverso de Apache ...

Answer 6

Me encuentro con este problema cuando uso Angular para publicar un registro en el back-end de Django REST . A veces, no hay una razón particular para este problema. Verifique cuidadosamente el mensaje de error de Django, encontrará una solución.

Answer 7

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 y luego se configura en el servidor web.config 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>

Answer 8

Resuelto con la entrada a continuación 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}]]

Answer 9

Si obtiene este mensaje de error del navegador:

Ningún encabezado ''Access-Control-Allow-Origin'' está presente en el recurso solicitado. El origen ''...'' no está, por lo tanto, permitido

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

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

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

Primero en su JavaScript, haga una llamada de 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 anexarlos al servidor URL remoto como parámetros. Le 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.

Answer 10

Use addHeader lugar de usar el método setHeader ,

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

* en la línea superior permitirá el access to all domains .

Para permitir el access to specific domain only :

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

Mira esta blog post .

Answer 11

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

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



}