1

Estoy haciendo una prueba con ionic en la cual realizo una petición http a un servicio.

Este servicio no tiene implementado CORS, con lo cual tengo que crear un proxy para evitar esto (esto es lo que me han dicho, creo que es así).

Mi app es muy sencilla, símplemente quiero hacer la petición http que he dicho anteriormente.

Para hacer mi app he hecho lo que se indica en esta web: https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api-rest/

En este ejemplo se hace una petición a una web que tiene implementada CORS, con lo cual la petición no da problemas pero al hacerla sobre mi servidor da el siguiente error:

"Origen http://localhost:8100 no encontrado en el encabezado Access-Control-Allow-Origin"

Para solucionar esto, he intentado lo que indica en el siguiente enlace: https://stackoverflow.com/questions/37172928/angular-cli-server-how-to-proxy-api-requests-to-another-server/39715785

Según esta resùesta he dejado mi fichero packaje.json de la siguiente manera:

{
  "name": "pruebahttp1",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "start": "ng serve --proxy-config proxy.conf.json" <--Esto es lo que he añadido
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/pro": "1.0.20",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
   "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project"
}

Y he creado el fichero proxy.config.json de esta manera:

{
"/api": {
    "target": "http://195.235.55.21:50072",
    "secure": false
}
}

{
"/angular": {
 "target":  {
   "host": "195.235.55.21",
   "protocol": "http:",
   "port": 50072
 },
 "secure": false,
 "changeOrigin": true,
 "logLevel": "info"
 }
}

Para ejecutar la app hasta ahora utilizaba ionic serve -l pero ahora me dice que tengo que utilizar el comando npm start y al utilizarlo no me ejecuta la app y me indica lo siguiente:

ng serve --proxy-config proxy.conf.json

As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release, which will only support Node 6.9 and greater. This package will be officially deprecated shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false". You have to be inside an angular-cli project in order to use the serve command. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: ng serve --proxy-config proxy.conf.json npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\Usuario\AppData\Roaming\npm-cache_logs\2018-03-12T11_26_14_674Z-debug.log

¿Alguna idea para poder arreglarlo? Gracias

4
  • 1
    Yo para desarrollo uso el navegador Chrome, y para poder hacer eso utilizo la extensión una extensión de Chrome: Allow-Control-Allow-Origin: * Un saludo, espero que te sirva.
    – luama
    Commented el 12 mar. 2018 a las 11:42
  • la he instalado pero me sigue sin devolver los resultados, o eso parece porque en la vista no me carga los resultados y no veo que me de error por ningún sitio... Commented el 12 mar. 2018 a las 11:44
  • Estás seguro de que es un problema de cors? Lo tienes abierto en el servidor para todos?
    – David
    Commented el 12 mar. 2018 a las 11:45
  • Si, estoy seguro. En el servidor no puedo implementar cors, por eso que tengo que hacer algo para "saltarmelo" Commented el 12 mar. 2018 a las 12:06

2 respuestas 2

2

Por lo que leo en la documentación oficial de Ionic, en lugar de usar el CLI de angular se usa uno propio de ionic (en lugar de ng serve se usa ionic serve), lo que hace la configuración sea ligeramente distinta:

Ejemplo:

  • Tienes tu aplicación con Angular que se carga desde http://localhost:4200/.
  • Dicha aplicación requiere hacer llamadas AJAX a http://aqui.com/api/<nombre_recurso>.

Por tanto, en el fichero ionic.config.json añades una entrada como la siguiente:

"proxies": [
  {
    "path": "/api",
    "proxyUrl": "http://aqui.com/api"
  }
]

Y, en tu código, cuando uses http.get('/api/v1/usuarios'), tu servidor local recibirá esa petición y la redirigirá a http://aqui.com/api/v1/usuarios. De ese modo, para el navegador todo viene del mismo sitio y no te tienes que preocupar de CORS.

Para lanzar el servidor, sigues usando ionic serve

3
  • Simplemente tengo que añadir eso al fichero ionic.config.json? Con eso no me funciona, no se si tengo que modificar algo de la url que ataco... Commented el 12 mar. 2018 a las 12:48
  • Tu aplicación tiene que "atacar" a la dirección localhost:8100/v1 para obtener los recursos. Por eso es tan importante tener la URL base en el fichero environment.ts Commented el 12 mar. 2018 a las 12:50
  • No veo como lo tengo que hacer la verdad, no se si tengo que poner en proxyUrl la url original a la que tenía que apuntar y tampoco veo claro en mi provider.ts que url tengo que poner... Commented el 12 mar. 2018 a las 13:50
0

Ok. Perdón pensé que se entendería a simple vista. Después de buscar soluciones al problema del proxy en ionic v4 me di cuenta que la solución es sencilla es primero crear un archivo “proxy.conf.json” en la raíz del proyecto. Allí hay que poner estos datos:

{
    "/api": {
        "target": "http://localhost:80/api",
        "secure": false,
        "pathRewrite": {
          "^/api": ""
        },
        "changeOrigin": true
      }
}

De estos datos no hay que olvidarse de la exp. Regular “pathRewrite” para que funcione.

Luego para que arranque bien hay que indicarlo al inicio del servidor de ionic:

ionic serve -- --proxy-config proxy.conf.json (no olvidarse de los dos guiones medio al comienzo)

A mi me funciono espero que también a uds. Con ionic.config.json no funciona.

Gracias.

1
  • 1
    No es necesario dado el contenido publicar una nueva respuesta, alcanza con qué le des editar a la primera y corrijas
    – user75901
    Commented el 22 mar. 2019 a las 18:27

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.