1

Estoy realizando una petición simple a un web service que tengo alojado en un hosting. Si pruebo con postman, me devuelve un 200 y todo va correctamente, pero no sé qué hago mal en mi ejemplo. Os dejo el código:

$(document).ready(function(){
	
	var url = 'https://www.dominiowebservice.com/miws/'
	var jsonData = {
		  "id": 23,
		  "datos": {
			  "nombre": "Nombre",
			  "email": "[email protected]",
			  "comentario": "Texto de mi comentario"
		  }
		}
	
	$.ajax({
        type: 'POST',
        url: url,
        data: jsonData,
        dataType: 'json',
        contentType: 'application/json',
		headers: { "Authorization": 'Bearer ' + 'lzoKSJorIm0rJEfTcsw'},
        success: function(response) {
          console.log('SUCCESS')
          console.log(response)
        }
    })
	
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Me devuelve el siguiente error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.dominiowebservice.com/miws/. (Reason: CORS preflight channel did not succeed).

¿Cómo puedo solucionarlo? ¿El error está en mi solicitud ajax o en el propio web service? Pero ya os digo que desde Postman me ha funcionado

6
  • 1
    ¿Tu aplicación https://www.dominiowebservice.com/miws/ es PHP u otro lenguaje de programación? Commented el 14 ago. 2018 a las 8:18
  • Si, así es, mi aplicación está en PHP @OscarGarcia
    – Norak
    Commented el 14 ago. 2018 a las 13:12
  • 1
    ¿Conseguiste solucionar el problema? He hecho una edición para corregir un problema que había y debería funcionar mejor ahora. Commented el 31 ago. 2018 a las 7:19
  • 1
    Lo he conseguido, muchísimas gracias por tu ayuda y por tu explicación! Está perfecto :)
    – Norak
    Commented el 10 sept. 2018 a las 12:23
  • 1
    De nada, un placer ser de ayuda :) Commented el 10 sept. 2018 a las 12:27

2 respuestas 2

1

Las reglas de CORS (o también conocidas como de intercambio de recursos de origen cruzado) impiden que puedas acceder a los recursos de una página externa si ésta no autoriza a tu sitio web a hacerlo.

Por defecto todas las consultas dentro de un mismo origen (misma URL o Same Origin Policy) se presuponen seguras y no hacen uso de CORS para su validación, sólo las consultas a orígenes (o URLs) externas.

Para ello el navegador realiza una consulta previa (preflight request) mediante el método HTTP OPTIONS.

Precisamente esa prueba previa es la que ha fallado y por eso nos genera el error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.dominiowebservice.com/miws/.

(Reason: CORS preflight channel did not succeed).

O, lo que es lo mismo, que la comprobación previa de que tu API permite consultas desde el origen ha fallado y, por lo tanto, se presupone prohibido.

Una forma de implementar la respuesta a esa consulta previa podría ser agregando el siguiente código al comienzo de tu script PHP:

<?php
/* Permitimos a cualquier origen acceder a este API de manera remota */
header('Access-Control-Allow-Origin: *');
/* Permitimos la cabecera HTTP X-Requested-With (por ejemplo) */
header('Access-Control-Allow-Headers: X-Requested-With');
/* No debe ejecutarse el resto del script mediante la consulta OPTIONS previa */
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
  die();
}

OJO: Este código permite el acceso a tu API desde cualquier URL.


Si deseas restringir el acceso al API a un reducido número de URLs entonces deberías hacer algo como lo siguiente:

<?php
/* Listado de URLs (orígenes) que tienen acceso al API (sin / al final) */
$autorizados = [
  'http://www.origen1.com',
  'https://www.origen2.es',
];
/* Comprobamos que el origen esté en el listado de orígenes permitidos */
if (
  isset($_SERVER['HTTP_ORIGIN'])
  && in_array($_SERVER['HTTP_ORIGIN'], $autorizados) === true
) {
  /* Indicamos que este API permite métodos GET, POST y OPTIONS (por ejemplo) */
  header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
  header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
  }
  /* No debe ejecutarse el resto del script mediante la consulta OPTIONS previa */
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
  die();
}

Existen multitud de cabeceras HTTP que nos permiten gestionar el intercambio de datos:

  • Access-Control-Allow-Origin
  • Access-Control-Allow-Credentials
  • Access-Control-Allow-Headers
  • Access-Control-Allow-Methods
  • Access-Control-Expose-Headers
  • Access-Control-Max-Age
  • Access-Control-Request-Headers
  • Access-Control-Request-Method
  • Origin

Entre ellas una importante, en cuanto a rendimiento, es Access-Control-Max-Age. Nos permite permitir al navegador guardar el resultado de la consulta previa en caché durante un tiempo determinado:

<?php
/* Evitamos que el navegador compruebe de nuevo CORS durante una hora */
header('Access-Control-Max-Age: 3600');
0

La única manera de evitar la política del mismo origen en llamadas con ajax es utilizar el tipo de datos jsonp. Sin embargo, el servidor debe soportarlo.

$.ajax({
    dataType: "jsonp",
    ...
});

Aquí hay un artículo (en inglés) bastante interesante sobre el tema. En el se habla de la política de mismo origen y los problemas con ajax. Descripción y ejemplos de json, cúando se puede usar, y problemáticas de utilizarlo (principalmente de seguridad).

2
  • Gracias por tu ayuda. Corrígeme si me equivoco, pero creo que jsonp no sirve para peticiones "post" y la petición al web service debe ser post y no get
    – Norak
    Commented el 30 jul. 2018 a las 10:23
  • 1
    Sí, estás en lo cierto. No servirá para peticiones post. Había pasado por alto el tipo de petición en tu pregunta
    – Julio
    Commented el 30 jul. 2018 a las 10:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.