javascript - solucion - El origen no está permitido por Access-Control-Allow-Origin
javascript no access control allow origin header is present on the requested resource (22)
Estoy realizando una Ajax.request a un servidor remoto de PHP en una aplicación Sencha Touch 2 (incluida en PhoneGap ).
La respuesta del servidor es la siguiente:
XMLHttpRequest no puede cargar http://nqatalog.negroesquisso.pt/login.php . Origin
http://localhost:8888no está permitido por Access-Control-Allow-Origin.
¿Como puedo solucionar este problema?
Como Matt Mombrea es correcto para el servidor, es posible que tenga otro problema que sea el rechazo de la lista blanca.
Tienes que configurar tu phonegap.plist. (Estoy usando una versión antigua de phonegap)
Para cordova, puede haber algunos cambios en el nombre y el directorio. Pero los pasos deberían ser mayormente los mismos.
Primero seleccione Archivos de soporte> PhoneGap.plist
luego en "ExternalHosts"
Agregue una entrada, con un valor de tal vez " http://nqatalog.negroesquisso.pt " Estoy usando * solo para fines de depuración.
Cuando recibas la solicitud puedes
var origin = (req.headers.origin || "*");
que cuando tienes que responder ve con algo así:
res.writeHead(
206,
{
''Access-Control-Allow-Credentials'': true,
''Access-Control-Allow-Origin'': origin,
}
);
El comodín no es una opción muy segura. Desearía que fuera más específico: verifique la respuesta que he escrito aquí sobre la misma pregunta; ¿Cómo pasar por alto Access-Control-Allow-Origin?
En Ruby on Rails , puedes hacerlo en un controlador:
headers[''Access-Control-Allow-Origin''] = ''*''
En ruby sinatra
response[''Access-Control-Allow-Origin''] = ''*''
para todos o
response[''Access-Control-Allow-Origin''] = ''http://yourdomain.name''
Esta fue la primera pregunta / respuesta que surgió cuando intenté resolver el mismo problema utilizando ASP.NET MVC como fuente de mis datos. Me doy cuenta de que esto no resuelve la pregunta de PHP , pero está lo suficientemente relacionado como para ser valioso.
Estoy usando ASP.NET MVC. La publicación del blog de Greg Brant funcionó para mí. En última instancia, crea un atributo, [HttpHeaderAttribute("Access-Control-Allow-Origin", "*")] , que puede agregar a las acciones del controlador.
Por ejemplo:
public class HttpHeaderAttribute : ActionFilterAttribute
{
public string Name { get; set; }
public string Value { get; set; }
public HttpHeaderAttribute(string name, string value)
{
Name = name;
Value = value;
}
public override void OnResultExecuted(ResultExecutedContext filterContext)
{
filterContext.HttpContext.Response.AppendHeader(Name, Value);
base.OnResultExecuted(filterContext);
}
}
Y luego usándolo con:
[HttpHeaderAttribute("Access-Control-Allow-Origin", "*")]
public ActionResult MyVeryAvailableAction(string id)
{
return Json( "Some public result" );
}
Esto puede ser útil para cualquier persona que necesite una excepción para las versiones "www" y "no www" de un referente:
$referrer = $_SERVER[''HTTP_REFERER''];
$parts = parse_url($referrer);
$domain = $parts[''host''];
if($domain == ''google.com'')
{
header(''Access-Control-Allow-Origin: http://google.com'');
}
else if($domain == ''www.google.com'')
{
header(''Access-Control-Allow-Origin: http://www.google.com'');
}
Esto se debe a la política del mismo origen . Ver más en Mozilla Developer Network o Wikipedia .
Básicamente, en su ejemplo, necesita cargar la página http://nqatalog.negroesquisso.pt/login.php solo desde nqatalog.negroesquisso.pt , no localhost .
Hace un tiempo escribí un artículo sobre este tema, Cross Domain AJAX .
La forma más fácil de manejar esto si tiene el control del servidor que responde es agregar un encabezado de respuesta para:
Access-Control-Allow-Origin: *
Esto permitirá Ajax dominio cruzado. En PHP, querrás modificar la respuesta así:
<?php header(''Access-Control-Allow-Origin: *''); ?>
Simplemente puede poner la Header set Access-Control-Allow-Origin * en la configuración de Apache o en el archivo htaccess. Simplemente funciona como un amuleto.
De los comentarios, esta es una nota importante: el comodín permitirá que cualquier dominio envíe solicitudes a su host. Recomiendo reemplazar el asterisco con un dominio específico en el que se ejecutarán los scripts .
Me he encontrado con esto unas cuantas veces cuando trabajo con varias API. A menudo, una solución rápida es agregar "& callback =?" hasta el final de una cadena. A veces, el signo tiene que ser un código de carácter y, a veces, un "?": "? Callback =?" (ver Uso de la API Forecast.io con jQuery )
Puede hacer que funcione sin modificar el servidor al hacer que la broca que incluye el encabezado Access-Control-Allow-Origin: * en las respuestas de las OPCIONES HTTP.
En Chrome, usa esta extensión . Si estás en Mozilla, comprueba esta respuesta .
Si no tiene el control del servidor, simplemente puede agregar este argumento a su --disable-web-security Chrome: --disable-web-security .
Tenga en cuenta que no usaría esto para "navegación web" normal. Para referencia, vea esta publicación: Deshabilite la misma política de origen en Chrome .
Una vez que use Phonegap para construir la aplicación y cargarla en el dispositivo, esto no será un problema.
Si está escribiendo una extensión de Chrome y recibe este error, asegúrese de haber agregado la URL base de la API al bloque de permisos de su manifest.json , por ejemplo:
"permissions": [
"https://itunes.apple.com/"
]
Si está trabajando en Chrome, simplemente puede instalar la extensión de Chrome desde la tienda de Chrome para resolver problemas relacionados con CORS.
Extensión: Permitir-Control-Permitir Enlace de origen : [ https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en][1]
Si estás usando Apache solo agrega:
<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</ifModule>
en su configuracion Esto hará que todas las respuestas de su servidor web sean accesibles desde cualquier otro sitio en Internet. Si tiene la intención de permitir que los servicios de su host sean utilizados por un servidor específico, puede reemplazar el * con la URL del servidor de origen:
Header set Access-Control-Allow-Origin: http://my.origin.host
Si estás usando Chromer usa este plugin.
Si obtiene esto en Angular.js, asegúrese de escapar de su número de puerto de esta manera:
var Project = $resource(
''http://localhost//:5648/api/...'', {''a'':''b''}, {
update: { method: ''PUT'' }
}
);
Vea here para más información sobre él.
Si tiene una ASP.NET / ASP.NET MVC , puede incluir este encabezado a través del archivo Web.config:
<system.webServer>
...
<httpProtocol>
<customHeaders>
<!-- Enable Cross Domain AJAX calls -->
<remove name="Access-Control-Allow-Origin" />
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
También tenemos el mismo problema con la aplicación phonegap probada en Chrome. Una máquina de Windows que usamos debajo del archivo por lotes todos los días antes de abrir Chrome. Recuerde que antes de ejecutar esto, debe limpiar todas las instancias de Chrome del administrador de tareas o puede seleccionar Chrome para que no se ejecute en segundo plano.
LOTE: (usar cmd)
cd D:/Program Files (x86)/Google/Chrome/Application/chrome.exe --disable-web-security
Te daré una solución simple para esta. En mi caso no tengo acceso a un servidor. En ese caso, puede cambiar la política de seguridad en su navegador Google Chrome para permitir Access-Control-Allow-Origin. Esto es muy simple:
- Crear un acceso directo del navegador Chrome
- Haga clic derecho en el icono de acceso directo -> Propiedades -> Acceso directo -> Destino
Simplemente pegue en "C:/Program Files/Google/Chrome/Application/chrome.exe" --allow-file-access-from-files --disable-web-security .
La ubicación puede diferir. Ahora abre Chrome haciendo clic en ese acceso directo.
si está bajo apache, simplemente agregue un archivo .htaccess a su directorio con este contenido:
Header set Access-Control-Allow-Origin: *
Header set Access-Control-Allow-Headers: content-type
Header set Access-Control-Allow-Methods: *
**Add this meta tag in your Webservice**
header(''Content-type: application/json'');
header(''Access-Control-Allow-Origin: *'');