1

Intentando insertar una información en una base de datos alojada en Azure, me he encontrado que desde mi WebApp hecha con Angular y Node, me lanza los errores:

Response for preflight has invalid HTTP status code 405 405 (Method Not Allowed)

cc

Pero usando una aplicación para realizar peticiones todo sale bien:

cc3

22

El código que uso estaba usando es el siguiente:

$http.post('http://unicesarapp.azurewebsites.net/api/Materias1', 
          {"Id":1,"Nombre":"Prog. Haskell","Creditos":3,"IdGrupo":11,"Dia":"Miercoles","Hora":8,"Lugar":"Bloque B"}
    ).then(function(response){
        console.log(response);
    }).catch(function(error){
        console.log(error);
    }); 

Luego lo modifiqué de la siguiente manera:

$http.post('http://unicesarapp.azurewebsites.net/api/Materias1', 
              ({"Id":parseInt($scope.codigo),"Nombre":$scope.nombre,"Creditos":parseInt($scope.creditos),
                "IdGrupo":parseInt($scope.grupo), "Dia":$scope.dia,"Hora":parseInt($scope.hora),"Lugar":$scope.lugar}), {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
        }

        ).then(function(response){
            console.log(response);
        }).catch(function(error){
            console.log(error);
        });

Y me aparece ahora el siguiente error:

POST http://unicesarapp.azurewebsites.net/api/Materias1 400 (Bad Request)

fff

7
  • Entonces, tienes dos errores o sólo uno? el 27 oct. 2017 a las 7:09
  • @PabloLozano el punto es que no me deja enviar la información el 27 oct. 2017 a las 12:03
  • 1
    Si el preflight te falla con "method not allowed" me parece que, a menos que tengas acceso a la configuración de la aplicación web, no vas a poder solucionarlo. El 400 significa que estás enviando algo mal, ya sea que falta algún dato, el formato no es el correcto, el nombre del campo no es el esperado... etc. el 27 oct. 2017 a las 12:15
  • Si claro tengo acceso a todo se servidor o cliente, entonces, como sabría que lo que envio no es correcto, ya te muestro algo el 27 oct. 2017 a las 12:18
  • @PabloLozano acabo de enviar esto, codigo, usando arc, y todo bien el 27 oct. 2017 a las 12:27

2 respuestas 2

1

Por lo que veo en tus capturas de pantalla (por favor, la próxima vez copia el texto, es más cómodo para todos), cuando usas la aplicación ARC y te funciona, estás mandando un JSON así:

{
 ... //datos
}

Pero cuando usas tu propio código, el JSON tiene este formato:

{
  config: {
    data: {
      ... //datos
    }
  }
}

con lo que es normal que te falle, el objeto enviado no es igual.

0

En el caso de la primer petición, se debe a que tu API no tiene habilitado CORS, además de que no soporta peticiones OPTIONS. De acuerdo a la documetación de MDN:

En CORS, se envía una solicitud de verificación previa con el método OPTIONS para que el servidor pueda responder si es aceptable enviar la solicitud con estos parámetros. El encabezado Access-Control-Request-Method notifica al servidor como parte de una solicitud de verificación previa que cuando se envíe la solicitud actual, se enviará con un método de solicitud POST. El encabezado Access-Control-Request-Headers notifica al servidor que cuando se envíe la solicitud actual, se enviará con un encabezado personalizado X-PINGOTHER y Content-Type. El servidor ahora tiene la oportunidad de determinar si desea aceptar una solicitud en estas circunstancias.

Bajo ese contexto, del lado de la API debes activar el soporte para peticiones [OPTIONS], así como ajustar el origen a todos con Access-Control-Allow-Origin: *.


Solución:

Opción 1:

Agregar el siguiente segmento de código en el método Application_Start del archivo Global.asax:

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
if (HttpContext.Current.Request.HttpMethod != "OPTIONS") return;
HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "gid, filename, Origin, X - Requested - With, Content - Type, Accept, Authorization");

Opción 2:

(Puede ser en conjunto con la opción 1) Instalar y habilitar CORS en el API vía Nuget:

Install-Package Microsoft.AspNet.WebApi.Cors

Agregar en el método Register del archivo App_Start\WebApiConfig.cs:

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Opción 3:

Habilitar CORS directamente en el archivo web.config:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

Si tuvieras algún header personalizado, se debe agregar al Access-Control-Allow-Headers, por ejemplo:

<add name="Access-Control-Allow-Headers" value="Content-Type, X-Header-Extra" />

Por último, habilitar OPTIONS agregando el siguiente segmento de código en el método Application_Start del archivo Global.asax:

if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
{
    Response.Flush();
}

Opción 4:

Si llegase a ser una petición Ajax por medio de jQuery, puedes hacer uso de crossDomain: true:

$.ajax({
   type: "POST",
   crossDomain: true,
   data: JSON.stringify(student),
   withCredentials: true,
   url: 'http://www.example.com/api/example',
   contentType: "application/json",
   success: function (result) {
       console.log(result);
   }
});
1
  • La opción 4 obliga a que el servidor también provea de respuestas compatibles JSONP el 27 oct. 2017 a las 15:22

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.