javascript - resource - jquery support cors

Error CORS con jquery

Question

Actualmente estoy trabajando en un proyecto que usa la API cloudapp y estoy usando jquery. Aquí está mi código:

 $.ajax({
            headers: { "Accept": "application/json"},
            type: ''GET'',
            url: ''http://cl.ly/2wr4'',
            crossDomain: true,
            success: function(data, textStatus, request){
                console.log(data);
            }
 });

Cuando ejecuto esto recibo la respuesta 200 OK y este error en Firefox:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://cl.ly/2wr4. This can be fixed by moving the resource to the same domain or enabling CORS.

y este error en Google Chrome:

XMLHttpRequest cannot load http://cl.ly/2wr4. No ''Access-Control-Allow-Origin'' header is present on the requested resource. Origin ''null'' is therefore not allowed access.

y nada está registrado en la consola. Por favor, ¿cómo puedo solucionar este error?

Gracias.

Answer 1

para corregir el error, debe habilitar CORS en el servidor. El cliente espera ver los encabezados de CORS enviados de vuelta para permitir la solicitud. Incluso podría enviar una solicitud de verificación previa para asegurarse de que los encabezados estén allí.

Puede habilitar el lado del servidor CORS para uno, varios o todos los dominios que lleguen a su servidor. La configuración es diferente dependiendo del tipo de su servidor.

Consulte la siguiente página para obtener más información: http://enable-cors.org/server.html

Ya habilitó las solicitudes CORS en su solicitud anterior, por lo que el lado del cliente debería estar todo listo.

Answer 2

CORS (Intercambio de recursos de origen cruzado) es una función HTML5 que permite que un sitio acceda a los recursos de otro sitio a pesar de estar bajo diferentes nombres de dominio.

La especificación W3C para CORS realmente hace un buen trabajo al proporcionar algunos ejemplos simples de los encabezados de respuesta, como el encabezado de la clave, Access-Control-Allow-Origin y otros encabezados que debe usar para habilitar CORS en su servidor web.

Si está buscando información específica sobre cómo configurar CORS en una variedad de servidores web comunes, consulte el sitio web Habilitar el intercambio de CORS. http://enable-cors.org/

Según la URL que proporcionó anteriormente, no creo que tenga un control en ese servidor. Por lo tanto, simplemente no funcionaría.

Aunque haya habilitado crossDomain: true, el servidor debe devolver los encabezados necesarios, como:

Aquí hay una respuesta válida del servidor; los encabezados específicos de CORS están en negrita

Respuesta HTTP:

Access-Control-Allow-Origin: http://xyzcom
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

Una cosa que puedes probar es esto:

$.ajax({
            headers: { "Accept": "application/json"},
            type: ''GET'',
            url: ''http://cl.ly/2wr4'',
            crossDomain: true,
            beforeSend: function(xhr){
                xhr.withCredentials = true;
          },
            success: function(data, textStatus, request){
                console.log(data);
            }
 });

De lo contrario, debe ponerse en contacto con el proveedor de API.

Answer 3

Una nota importante para los codificadores más nuevos es que todo en http://enable-cors.org/server.html supone que tiene un servidor en ejecución. Si eres nuevo, como lo era originalmente, este tipo de respuestas no ayudan.

Si acabas de crear algún código en tu computadora, CodePen, etc., no puedes configurarlo.

Hay una diferencia importante entre las secuencias de comandos del lado del servidor y del lado del cliente: su jquery se ejecuta en el lado del cliente (es decir, la computadora / navegador de los usuarios) y, como tal, no existe la posibilidad de configurar los encabezados allí.

Finalmente comencé a avanzar en este tema cuando configuré mi propio servidor y mis propios archivos PHP (PHP es del lado del servidor, como tal, se procesa en el servidor, no en el navegador) y pude comenzar a hacer las solicitudes correctamente.

Agregando esto para cualquier persona que esté siendo ahogada en respuestas que involucren la respuesta "Header set Access-Control-Allow-Origin "*" . Realmente me frustró cuando comencé también.