Home / Questions / 145430
Accepted
Pablo Simon DiEstefano
Asked: 2020-03-13 03:28:02 +0800 CST 2020-03-13 03:28:02 +0800 CST

Error making ionic http request

  • 772

I am doing a test with ionic in which I make an http request to a service.

This service doesn't have CORS implemented, so I have to create a proxy to avoid this (this is what I've been told, I think so).

My app is very simple, I just want to make the http request that I said before.

To make my app I have done what is indicated on this website: https://reviblog.net/2017/06/19/tutorial-de-ionic-comunicaciones-http-api-rest/

In this example, a request is made to a website that has CORS implemented, with which the request does not cause problems, but when it is made on my server, it gives the following error:

"Origin http://localhost:8100 not found in Access-Control-Allow-Origin header"

To fix this I have tried the following link: https://stackoverflow.com/questions/37172928/angular-cli-server-how-to-proxy-api-requests-to-another-server/39715785

According to this answer I have left my packaje.json file as follows:

{
  "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"
}

And I have created the proxy.config.json file like this:

{
"/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"
 }
}

To run the app until now I used ionic serve -l but now it tells me that I have to use the npm start command and when I use it it doesn't run the app and tells me the following:

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.jsonnpm 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\User\AppData\Roaming\npm-cache_logs\2018-03-12T11_26_14_674Z-debug.log

Any ideas to fix it? Thank you

ionic

2 Answers

  1. Best Answer

    From what I read in the official Ionic documentation , instead of using angular's CLI, ionic's own CLI is used (instead of ng serveis used ionic serve), which makes the configuration slightly different:

    Example:

    • You have your application with Angular which is loaded from http://localhost:4200/.
    • Such an application requires making AJAX calls to http://aqui.com/api/<nombre_recurso>.

    Therefore, in the file ionic.config.jsonyou add an entry like the following:

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

    And, in your code, when you use http.get('/api/v1/usuarios'), your local server will receive that request and redirect it to http://aqui.com/api/v1/usuarios. That way, for the browser everything comes from the same place and you don't have to worry about CORS.

    To launch the server, you keep usingionic serve

    • 2

  2. Okay. Sorry, I thought it would be understood at a glance. After looking for solutions to the proxy problem in ionic v4 I realized that the solution is simple, it is first to create a file "proxy.conf.json" in the root of the project. There you have to put this data:

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

    Of these data we must not forget the exp. Regular "pathRewrite" to make it work.

    Then, for it to start correctly, you have to indicate it at the start of the ionic server:

    ionic serve -- --proxy-config proxy.conf.json (don't forget the two middle hyphens at the beginning)

    It worked for me, I hope it works for you too. With ionic.config.json it doesn't work.

    Thanks.

    • 0