javascript - from - jQuery.getJSON-Problema de Access-Control-Allow-Origin

json jquery html

Question

Estoy justando la función $.getJSON() jQuery para devolver un conjunto corto de datos JSON.

Tengo los datos JSON en una url como example.com . No me di cuenta, pero como estaba accediendo a la misma URL, no se pudieron cargar los datos de JSON. Seguí a través de la consola y encontré que XMLHttpRequest no se pudo cargar debido a Access-Control-Allow-Origin .

Ahora, he leído, muchos sitios que acaban de decir que usan $.getJSON() y ese sería el trabajo $.getJSON() , pero obviamente no funcionó. ¿Hay algo que deba cambiar en los encabezados o en la función?

La ayuda es muy apreciada.

Answer 1

Es posible que desee utilizar JSON-P en su lugar (ver más abajo). Primero una explicación rápida.

El encabezado que ha mencionado proviene del estándar Cross Origin Resource Sharing . Tenga en cuenta que no es compatible con algunos navegadores que las personas realmente usan, y en otros navegadores ( suspiro de Microsoft) requiere usar un objeto especial ( XDomainRequest ) en lugar del estándar XMLHttpRequest que utiliza jQuery. También requiere que cambie los recursos del lado del servidor para permitir explícitamente el otro origen ( www.xxxx.com ).

Para obtener los datos JSON que está solicitando, básicamente tiene tres opciones:

1. Si es posible, puede ser compatible al máximo corrigiendo la ubicación de los archivos que está cargando para que tengan el mismo origen que el documento en el que los está cargando. (Supongo que debe cargarlos a través de Ajax, de ahí que aparezca el problema de Política de origen ).

2. Use JSON-P , que no está sujeto al SOP. jQuery tiene soporte incorporado en su llamada ajax (simplemente configure dataType en "jsonp" y jQuery hará todo el trabajo del lado del cliente). Esto requiere cambios en el servidor, pero no muy grandes; básicamente, cualquier cosa que tenga que genere la respuesta JSON solo busca un parámetro de cadena de consulta llamado "devolución de llamada" y ajusta el JSON en código JavaScript que llamaría a esa función. Por ejemplo, si su respuesta JSON actual es:

   {"weather": "Dreary start but soon brightening into a fine summer day."}

   Su secuencia de comandos buscará el parámetro de cadena de consulta de "devolución de llamada" (digamos que el valor del parámetro es "jsop123") y ajusta ese JSON en la sintaxis para una llamada de función de JavaScript:

   jsonp123({"weather": "Dreary start but soon brightening into a fine summer day."});

   Eso es. JSON-P es muy compatible (porque funciona mediante etiquetas JavaScript). JSON-P es solo para GET , no POST (nuevamente porque funciona a través de etiquetas de script ).

3. Use CORS (el mecanismo relacionado con el encabezado que citó). Detalles en la especificación vinculada anteriormente , pero básicamente:

   R. El navegador enviará a su servidor un mensaje de "verificación previa" utilizando el verbo HTTP OPTIONS (método). Contendrá los distintos encabezados que enviaría con GET o POST , así como los encabezados "Origen", "Método de solicitud de control de acceso" (por ejemplo, GET o POST ) y "Cabeceras de solicitud de control de acceso". (los encabezados que quiere enviar).

   B. Su PHP decide, basándose en esa información, si la solicitud es correcta y si responde con "Acceso-Control-Permitir-Origen", "Control de acceso-Permitir-Métodos" y "Control de acceso-Permitir- Encabezados "encabezados con los valores que permitirá. No envía ningún cuerpo (página) con esa respuesta.

   C. El navegador verá su respuesta y verá si puede enviarle el GET o POST real. Si es así, enviará esa solicitud, nuevamente con el "Origen" y varios encabezados "Access-Control-Request-xyz".

   D. Su PHP examina esos encabezados de nuevo para asegurarse de que todavía están bien, y si es así responde a la solicitud.

   En pseudo- código (no he hecho mucho PHP, entonces no estoy tratando de hacer la sintaxis de PHP aquí):

   // Find out what the request is asking for
   corsOrigin = get_request_header("Origin")
   corsMethod = get_request_header("Access-Control-Request-Method")
   corsHeaders = get_request_header("Access-Control-Request-Headers")
   if corsOrigin is null or "null" {
       // Requests from a `file://` path seem to come through without an
       // origin or with "null" (literally) as the origin.
       // In my case, for testing, I wanted to allow those and so I output
       // "*", but you may want to go another way.
       corsOrigin = "*"
   }
   
   // Decide whether to accept that request with those headers
   // If so:
   
   // Respond with headers saying what''s allowed (here we''re just echoing what they
   // asked for, except we may be using "*" [all] instead of the actual origin for
   // the "Access-Control-Allow-Origin" one)
   set_response_header("Access-Control-Allow-Origin", corsOrigin)
   set_response_header("Access-Control-Allow-Methods", corsMethod)
   set_response_header("Access-Control-Allow-Headers", corsHeaders)
   if the HTTP request method is "OPTIONS" {
       // Done, no body in response to OPTIONS
       stop
   }
   // Process the GET or POST here; output the body of the response

   De nuevo enfatizando que esto es un pseudo-código.

Answer 2

Es simple, use la función $.getJSON() y en su URL solo incluya

callback =?

como un parámetro. Eso convertirá la llamada a JSONP que es necesaria para realizar llamadas entre dominios. Más información: http://api.jquery.com/jQuery.getJSON/