Proxy ERR_NAME_NOT_RESOLVED

Ionic Framework ionic-v3
1

Hello, I’m having an issue getting a proxy in the ionic.config.json file to work correctly. My ionic.config.json looks like this:

{ "name": "myApp", "app_id": "512887ea", "type": "ionic-angular", "proxies": [ { "path": "/api/", "proxyUrl": "https://api.coinmarketcap.com/v1" } ], "integrations": { "cordova": {} } }

The proxy seems to be working properly when I make a http request to /api, but if I make a request to /api/ticker then the browser will just request http://ticker. @hich is where I get the net::ERR_NAME_NOT_RESOLVED error in the console.

So my question is, when requesting /api/ticker Shouldn’t the proxy be switching the url to https://api.coinmarketcap.com/v1/ticker?

2

the proxy only works for domain name replacement. so adding the /v1 is breaking it. you have to put the v1 in your request

3

Thank you. So I’ve made some changes.

What I am trying to request is https://api.coinmarketcap.com/v1/ticker/

I’ve now changed my proxy to

"proxies": [ { "path": "/v1", "proxyUrl": "https://api.coinmarketcap.com" } ]

and my http request to /v1/ticker is showing the request URL in chrome dev tools as:

http://localhost:8100/v1/ticker

so it doesnt seem like the localhost domain is being replaced. I have also restarted and launched with ionic serve

4

when you do “ionic serve”

do you see

[20:56:54]  build dev started ... 
[20:56:54]  Proxy added:/v1 => https://api.coinmarketcap.com/

during build process before display

5

exactly.

[22:21:00] Proxy added:/v1 => https://api.coinmarketcap.com/

6

ok, that confirms proxy is going, then it must be a Chrome issue,

I use firefox
ionic server -lab

maybe some help here https://www.google.com/search?q=chrome+proxy+allow&ie=utf-8&oe=utf-8

7

Unfortunately, the same issue occurred on firefox. still requesting /v1/ticker and getting http://localhost:8100/v1/ticker as the request.

8

what is the console error

9

GET http://localhost:8100/v1/ticker 404 (Not Found)

and from the network tab:

Request URL:http://localhost:8100/v1/ticker Request Method:GET Status Code:404 Not Found Remote Address:127.0.0.1:8100 Referrer Policy:no-referrer-when-downgrade

10

this is a problem with the service you are trying to contact.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy

try a know open json web service to test
http://www.geonames.org/export/JSON-webservices.html

there is a great app called postman i have on my Mac, to test webservice

11

Thanks for bearing with me on this.

I have tried to replace the url in my configs to an entirely different url / api.

the api is a mock data api https://jsonplaceholder.typicode.com

In this case I am requesting:

`/comments/1’

and that is being finally requested in the browser as:

Request URL:http://localhost:8100/comments/1
Request Method:GET
Status Code:304 Not Modified
Remote Address:127.0.0.1:8100
Referrer Policy:no-referrer-when-downgrade

my proxy is :
{ "path": "/comments", "proxyUrl": "https://jsonplaceholder.typicode.com/comments" }

oddly though the request to /comments does return a result.

so why do you think it does not work with https://api.coinmarketcap.com/v1? the pattern is the same.

EDIT: I’m seeing that there is a 301 response in the "/v1/ticker" request:

Request URL:http://localhost:8100/v1/ticker
Request Method:GET
Status Code:301 Moved Permanently (from disk cache)
Remote Address:127.0.0.1:8100
Referrer Policy:no-referrer-when-downgrade

Response Headers
cf-cache-status:HIT
cf-ray:3bc7faa76f676c88-SJC
content-length:287
content-type:text/html; charset=utf-8
date:Sun, 12 Nov 2017 08:04:12 GMT
location://ticker/
server:cloudflare-nginx
vary:Accept-Encoding
X-Powered-By:Express

Request Headers
Provisional headers are shown
Accept:application/json, text/plain, */*
Referer:http://localhost:8100/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko)Chrome/61.0.3163.100 Safari/537.36`

Is this confirming a problem with the service api.coinmarketcap?

12

After trying other API’s I belive that it was an issue with the specific API api.coinmarketcap. I wonder why that is though… Thanks for your help @Ben1nB1ack

13

actually I think it a CORS issue (a new addition to that)

I built a proxy on our server and I called the proxy url and the proxy called the service. etc.

14

So you were able to make it work on your end?

15

i revived old test project, set proxy and url and it worked
i use firefox
ionic serve --lab

import {Http, Headers, Response} from '@angular/http';

...
export class WscallPage {
webReturn: any;

  constructor(private http: Http) {
  }
...

  callWebserviceTest2() {
    /*

  proxy setup
  ,
    {
      "path": "/cm",
      "proxyUrl": "https://api.coinmarketcap.com"
    }

    */
    const baseURL = '/cm/v1/ticker/'


    console.log(baseURL);

    this.http.get(baseURL)
      .map((res:Response) => res.json())
      .subscribe(res => {
        this.webReturn = res;
        console.log(this.webReturn);
      });


  }

html

<ion-header>

  <ion-navbar>
    <ion-title>wscall</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <p>WS Calling Page</p>

  <ion-grid>
    <ion-row>
      <ion-col>
        <button ion-button (click)="callWebserviceTest2()">forum test</button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <p>Result: <br>
          <ion-scroll scrollY="true" scrollX="true">
            <pre>{{ webReturn | json}}</pre>
          </ion-scroll>

        </p>
      </ion-col>
    </ion-row>
  </ion-grid>



</ion-content>
16

Unbelievably, your configuration does not work on my end, and I copied your proxy and request exactly. I am still getting the 301:

Request URL:http://localhost:8100/cm/v1/ticker
Request Method:GET
Status Code:301 Moved Permanently (from disk cache)

followed by the 401:

Request URL:http://localhost:8100/v1/ticker/
Request Method:GET
Status Code:404 Not Found
Remote Address:127.0.0.1:8100
Referrer Policy:no-referrer-when-downgrade

EDIT: that is, I tried the configuration in my current project, I’m not sure what would happen if I started a new project. I will try that now.

17

http://testingfreak.com/how-to-fix-cross-origin-request-security-cors-error-in-firefox-chrome-and-ie/

18

I created a new ionic project with the simplest possible configuration and it worked fine. I was able to get data from the request. I’ll have to look into this further.