2

Anteriormente realizaba una petición usando lo siguiente en los Headers

'Content-Type': 'application/x-www-form-urlencoded'

Pero ahora la API me pide que debo enviarlo de la siguiente forma:

'Content-Type': 'application/json'

La función que realiza la petición es la siguiente:

function Autenticacion(datos) {

    var url = 'http://url'; 

    return $http.post(url, $httpParamSerializer(datos), {
        headers: {
            'Content-Type': 'application/json'
        }
    });

};

Lo cual me arroja el siguiente error

Error

OPTIONS http://API_URL 405 (Method Not Allowed)

 XMLHttpRequest cannot load http://API_URL. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.9:8100' is therefore not allowed access. The response had HTTP status code 405.

Pero cuando utilizo una herramienta, en mi caso ARC (Advance Rest Client) funciona. Lo cual se puede constatar en la imagen

enlace de la imagen de ARC

La API esta alojada en un servidor Azure.

3
  • 1
    para hacerlo de forma global no funcionaria tienes que cambiar las variables comunes al hacer en el run del angular jsfiddle.net/X2p7r/41 Commented el 28 feb. 2017 a las 21:34
  • Veo muy completa tu respuesta pero a la vez muy compleja, ya que no siento una explicación en el código, no soy muy bueno aun con angular. Commented el 28 feb. 2017 a las 21:39
  • $httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8'; esa es la linea en el config del angular agregala ademas de en la app iria algo como esto var myApp = angular.module('myApp', ['ngResource']); myApp.config(['$httpProvider', function ($httpProvider) { Commented el 1 mar. 2017 a las 12:14

3 respuestas 3

1

Es un problema de CORS como te han comentado.

Si bien la solución es "tocar" el backend para que se solvente, también puedes probar con una extensión para el navegador (A mi me ha funcionado en algunos casos solo).

En Chrome por ejemplo utilizo: Allow-Control-Origin

Y lo tengo configurado de forma que en Intercepted URLs or URL patterns tengo añadido el valor: *:// *

Puedes probar a ver si con eso te soluciona al menos para salir del paso hasta que te digan como modificar correctamente la parte back.

0

A ver hermano, intenta lo siguiente:

var url = 'http://url'; 

var parametros = JSON.stringify({username:user_email, password:user_password});    

return $http.post(url, parametros, {
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        }
    });

Buena suerte :D

5
  • hermano, mozilla fiero me dice esto, Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en API_URL (razón: falta la cabecera CORS 'Access-Control-Allow-Origin'). Commented el 1 mar. 2017 a las 1:45
  • 1
    Acabo de acceder nuevamente sin problemas desde Postman, algo me dice que debes habilitar el CORS en las configuraciones del ionic mediante un proxy. Revisad blog.ionic.io/handling-cors-issues-in-ionic
    – fredyfx
    Commented el 1 mar. 2017 a las 2:02
  • en mi caso también puedo realizar las pruebas desde una herramienta para realizar la petición(Advance Rest Client), pero no desde la aplicacion, gracias por el enlace. Commented el 1 mar. 2017 a las 3:39
  • de igual forma, en los comentarios un tipo puso este chrome plugin, para salir del paso sirve, pero prefiero que todo solucionado desde el servidor. Commented el 1 mar. 2017 a las 3:52
  • 1
    el error de CORS es que tu app nota que la url es extraña debes de darle permiso al servidor para que pueda consultar cualquier url Commented el 1 mar. 2017 a las 12:16
0

Este es un problema de CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). Resumiendo, cuando realizas una llamada Ajax desde el navegador, el navegador primero realiza una petición OPTIONS, para negociar con el servidor si la petición se puede hacer. Cuando el origen y el destino son el mismo servidor, no hay problema, pero cuando son diferentes, el servidor debe permitir dicho origen para realizar la petición.

Cuando el servidor contesta, la cabecera Access-Control-Allow-Origin debe contener tu IP (o la ip de la aplicación de angularjs).

Para este caso, debes configurar tu servidor (donde tienes expuestos los servicios REST) para que en la cabecera Access-Control-Allow-Origin tenga algo como eso Access-Control-Allow-Origin="*". Por lo menos así lo he hecho en java.

Saludos

1
  • En el caso mio, esta hecha la API en C# para ASP, y el amigo mio me dijo que era una configuración interna como tal, le voy a preguntar, que hizo en si para poder poner la respuesta clara, y claro el agrego esa linea que dices tu. Commented el 6 mar. 2017 a las 23:00

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.