No se puede hacer PUT/POST/DELETE Llamada HTTP usando CORS en JQuery 1.6.4

Question

Por lo tanto, puedo hacer una llamada GET exitosamente a mi servicio utilizando CORS. Sin embargo, algo debe estar fallando en el nivel de verificación previa para las operaciones POST, PUT y DELETE. Sin embargo, por lo que puedo decir, las respuestas del encabezado que mi servidor está devolviendo en respuesta a la consulta OPTIONS son correctas y coinciden con las descritas en

Aquí está mi código javascript, usando $ .ajax en JQuery 1.6.4.

$.ajax({ 
    url: 'http://myhome:8080/TaskApproval/resources/tasks/2', 
    context: this, 
    data: '<?xml version="1.0" encoding="UTF-8"?> <task> <description>Get carrots from the grocery store</description><originator>Chris</originator><subject>Get Carrots !!</subject><taskId>2</taskId> </task> ', 
    timeout: 30000, 
    type: 'PUT', 
    contentType: 'application/xml', 
    success: function(response) { 
    alert(response); 
    result = response; 
    }, 
    error: function(xhr) { 
    alert('Error! Status = ' + xhr.status + " Message = " + xhr.statusText); 
    } 
}); 

Ahora, esto es lo que parece mi ruta HTTP, cortesía de Firebug.

Solicitud:

OPTIONS /TaskApproval/resources/tasks/2 HTTP/1.1 
Host: widgethome:8080 
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip, deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Connection: keep-alive 
Origin: http://localhost:8080 
Access-Control-Request-Method: PUT 
Access-Control-Request-Headers: content-type 

Respuesta:

HTTP/1.1 200 OK 
X-Powered-By: Servlet/3.0 
Server: GlassFish v3 
Allow: OPTIONS,GET,DELETE,HEAD,PUT, POST 
Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE 
Access-Control-Max-Age: 1000 
Access-Control-Allow-Headers: * 
Content-Type: application/xml 
Content-Length: 2792 
Date: Wed, 28 Sep 2011 18:21:11 GMT 

No hay entonces PUT (o POST o DELETE), acabo de conseguir ese objeto xhr no útiles molesto que se parece a esto:

readyState 0 
responseText "" 
status 0 
statusText "error" 

Estoy muy confundido de que si elimino el contentType en mi llamada Ajax, y envía un inválido tipo de contenido por mi aplicación, el navegador realmente envía mi solicitud PUT, que falla porque Content-Type no es application/xml. Ver más abajo:

$.ajax({ 
    url: 'http://myhome:8080/TaskApproval/resources/tasks/2', 
    data: '<?xml version="1.0" encoding="UTF-8"?> <task> <description>Get carrots from the grocery store</description><originator>Chris</originator><subject>Get Carrots !!</subject><taskId>2</taskId> </task> ', 
    timeout: 30000, 
    type: 'PUT', 
    //contentType: 'application/xml', 
    success: function(response) { 
    alert(response); 
    result = response; 
    }, 
    error: function(xhr) { 
    alert('Error! Status = ' + xhr.status + " Message = " + xhr.statusText); 
    } 
}); 

conduce a esta Trail HTTP, de nuevo cortesía de Firebug:

opciones de solicitud:

OPTIONS /TaskApproval/resources/tasks/2 HTTP/1.1 
Host: myhome:8080 
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip, deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Connection: keep-alive 
Origin: http://localhost:8080 
Access-Control-Request-Method: PUT 

opciones de respuesta: Solicitud

HTTP/1.1 200 OK 
X-Powered-By: Servlet/3.0 
Server: GlassFish v3 
Allow: OPTIONS,GET,DELETE,HEAD,PUT, POST 
Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE 
Access-Control-Max-Age: 1000 
Access-Control-Allow-Headers: * 
Content-Type: application/xml 
Content-Length: 2792 
Date: Wed, 28 Sep 2011 18:26:23 GMT 

Put:

PUT /TaskApproval/resources/tasks/2 HTTP/1.1 
Host: myhome:8080 
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2 
Accept: */* 
Accept-Language: en-us,en;q=0.5 
Accept-Encoding: gzip, deflate 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 
Connection: keep-alive 
Content-Type: application/x-www-form-urlencoded; charset=UTF-8 
Referer: http://localhost:8080/TaskApproval/crossdomain.html 
Content-Length: 197 
Origin: http://localhost:8080 

Respuesta Put:

HTTP/1.1 415 Unsupported Media Type 
X-Powered-By: Servlet/3.0 
Server: GlassFish v3 
Content-Type: text/html 
Content-Length: 1069 
Date: Wed, 28 Sep 2011 18:26:23 GMT 

El 415 tiene sentido porque no apoyo el contenido urlencoded-x-www-formulario de solicitud /, solamente application/xml. Lo que no entiendo es por qué la configuración del Content-Type correctamente evita el PUT?

¡Gracias por cualquier idea! He estado buscando en Internet durante bastante tiempo y no puedo encontrar una solución para este problema.

Answer 1

Debe incluir encabezados CORS tanto en la verificación previa como en la respuesta real.Así que intente incluir los siguientes encabezados en la respuesta puestos de su servidor:

Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE 
Access-Control-Allow-Headers: Content-Type 

otra cosa a tener en cuenta es que la especificación CORS no lista '*' como un valor válido para el Acceso-Control-Allow-encabezados:

http://www.w3.org/TR/cors/#access-control-allow-headers-response-he

En su lugar, usted debe tratar de forma explícita una lista de todos los encabezados de la solicitud de esta manera:

Access-Control-Allow-Headers: Content-Type 

debe incluir contenido-Ty pe porque Content-Type no se considera un simple encabezado cuando su valor no es application/x-www-form-urlencoded, multipart/form-data, o text/plain (Consulte la especificación CORS para obtener más información sobre encabezados simples).

Answer 2

No se olvide de asegurarse de que su solicitud de Opciones prefight también respondió con:

Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE 
Access-Control-Allow-Headers: Content-Type 

Answer 3

El uso de extensiones de Chrome

Para hacer CORS solicitud, puede utilizar este sencillo control de chrome extension(Permitir Permitir origen).

Esto le permitirá realizar la solicitud CORS sin agregar ningún parámetro adicional en headers/config.