Nativescript Axios Call to Web API

Question

I am trying to do an axios GET call on my NativeScript-Vue application to an ASP.Net WebAPI backend.

On a VueJS web application, I am using the following code:

axios.get(url).then((response) => {
    console.log(response)
  }, (err) => {
    console.log(err)
})

And the above code works fine. But as soon as I use it to my NativeScript Vue application, I am not getting anything.

The console.log shows the following:

status: null,
  statusText: '',
  headers: {},  
  config: 
   { adapter: { [Function: xhrAdapter] [prototype]: [Object], [name]: 'xhrAdapter', [length]: 1 },
     transformRequest: { '0': [Object] },
     transformResponse: { '0': [Object] },
     timeout: 0,
     xsrfCookieName: 'XSRF-TOKEN',
     xsrfHeaderName: 'X-XSRF-TOKEN',
     maxContentLength: -1,
     validateStatus: { [Function: validateStatus] [prototype]: [Object], [name]: 'validateStatus', [length]: 1 },
     headers: { Accept: 'application/json, text/plain, */*' },
     method: 'get',
     url: 'THE_URL_HERE',
     data: undefined },
  request: 
   { UNSENT: 0,
     OPENED: 1,
     HEADERS_RECEIVED: 2,
     LOADING: 3,
     DONE: 4,
     _responseType: '',
     textTypes: 
      [ 'text/plain',
        'application/xml',
        'application/rss+xml',
        'text/html',
        'text/xml',
        [length]: 5 ],
     _listeners: {},
     _readyState: 4,
     _options: 
      { url: 'THE_URL_HERE',
        method: 'GET',
        headers: [Object] },
     timeout: 0,
     onreadystatechange: { [Function: handleLoad] [length]: 0, [name]: 'handleLoad', [prototype]: [Object] },
     onerror: { [Function: handleError] [length]: 0, [name]: 'handleError', [prototype]: [Object] },
     ontimeout: { [Function: handleTimeout] [length]: 0, [name]: 'handleTimeout', [prototype]: [Object] },
     _errorFlag: true,
     _response: null,
     _responseTextReader: null,
     _headers: null,
     _status: null } }

Following the instructions posted on this article: Make Http Requests I am able to get some data (pretty much I replaced my url in my sample code above to point to the URL in the article.

I did some investigation and I also found out that in the Chrome Debugging Tools, this is what's being returned by Make HTTP Requests article:

status: 200,
  statusText: 'OK',
  headers: 
   { 'content-type': 'application/json',
     'access-control-allow-origin': '*',
     'set-cookie': 
      [ '__cfduid=d0755ff1a9e3a35137412056bfab86b221539838285; expires=Fri, 18-Oct-19 04:51:25 GMT; path=/; domain=.pokeapi.co; HttpOnly; Secure',
        [length]: 1 ],
     server: 'cloudflare',
     'access-control-allow-methods': 'GET, OPTIONS',
     'content-encoding': 'br',
     'access-control-allow-headers': 'Authorization, Origin, X-Requested-With, Content-Type, Accept',
     'expect-ct': 'max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"',
     date: 'Thu, 18 Oct 2018 04:51:25 GMT',
     'cf-ray': '46b863c5a8552a4f-SEA',
     vary: 'Accept-Encoding',
     'last-modified': 'Sat, 22 Sep 2018 23:55:29 GMT' },
  config: 
   { adapter: { [Function: xhrAdapter] [length]: 1, [name]: 'xhrAdapter', [prototype]: [Object] },
     transformRequest: { '0': [Object] },
     transformResponse: { '0': [Object] },
     timeout: 0,
     xsrfCookieName: 'XSRF-TOKEN',
     xsrfHeaderName: 'X-XSRF-TOKEN',
     maxContentLength: -1,
     validateStatus: { [Function: validateStatus] [length]: 1, [name]: 'validateStatus', [prototype]: [Object] },
     headers: { Accept: 'application/json, text/plain, */*' },
     method: 'get',
     url: 'https://pokeapi.co/api/v2/pokemon/?limit=151',
     data: undefined },
  request: 
   { UNSENT: 0,
     OPENED: 1,
     HEADERS_RECEIVED: 2,
     LOADING: 3,
     DONE: 4,
     _responseType: 'json',
     textTypes: 
      [ 'text/plain',
        'application/xml',
        'application/rss+xml',
        'text/html',
        'text/xml',
        [length]: 5 ],
     _listeners: {},
     _readyState: 4,
     _options: 
      { url: 'https://pokeapi.co/api/v2/pokemon/?limit=151',
        method: 'GET',
        headers: [Object] },
     timeout: 0,
     onreadystatechange: { [Function: handleLoad] [length]: 0, [name]: 'handleLoad', [prototype]: [Object] },
     onerror: { [Function: handleError] [length]: 0, [name]: 'handleError', [prototype]: [Object] },
     ontimeout: { [Function: handleTimeout] [length]: 0, [name]: 'handleTimeout', [prototype]: [Object] },
     _errorFlag: false,
     _response: { count: 949, next: null, previous: null, results: [Object] },
     _responseTextReader: 
      { [Function]
        [arguments]: null,
        [caller]: null,
        [length]: 0,
        [name]: '',
        [prototype]: [Object] },
     _headers: 
      { 'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Set-Cookie': '__cfduid=d0755ff1a9e3a35137412056bfab86b221539838285; expires=Fri, 18-Oct-19 04:51:25 GMT; path=/; domain=.pokeapi.co; HttpOnly; Secure',
        Server: 'cloudflare',
        'access-control-allow-methods': 'GET, OPTIONS',
        'Content-Encoding': 'br',
        'access-control-allow-headers': 'Authorization, Origin, X-Requested-With, Content-Type, Accept',
        'expect-ct': 'max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"',
        Date: 'Thu, 18 Oct 2018 04:51:25 GMT',
        'cf-ray': '46b863c5a8552a4f-SEA',
        Vary: 'Accept-Encoding',
        'Last-Modified': 'Sat, 22 Sep 2018 23:55:29 GMT' },
     _status: 200 } }

I am already quite stuck on what to do next for this issue. Notice there are some difference on the console.log(response) using my URL, and the URL provided on the article.

I tried my API call in Postman and I am getting some data.

I also tried the Pokemon API call in Postman and getting some data as well. So not really sure which thing to investigate next.

UPDATE: For those asking the URL of my WebAPI, I have it here: http://angeloaa-001-site1.itempurl.com/menucategory

You can try that link even in the browser (or postman) and you would see the data being returned as well.

Looking forward to some insights and responses,

Have you tried using the built-in http module as shown in this demo? — tony19
– tony19, Commented Oct 18, 2018 at 7:21

Marcus Höglund · Accepted Answer · 2018-10-18 06:45:54Z

1

One thing I notice is that your api does not return the Access-Control-Allow-Origin header in the response, it's just an empty object headers: {}

If you look at the response from the Make HTTP Requests article, it's includes the header 'access-control-allow-origin': '*'

And why do you need this header?

By default, browser implements the same origin policy which basically means that your browser will only allow your code to fetch data from the same origin. So if your api and your client is under different domains, you need to tell the browser to allow communication between the two. This is done by enabling CORS, cross origin request sharing, which basically is controlled by the Access-Control-Allow-Origin header in the api response.

To enable the cors in the api, follow this

answered Oct 18, 2018 at 6:45

Marcus Höglund

16.9k11 gold badges54 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Edwin Krause Over a year ago

Aren't NativeScript Vue applications 'native' Mobile apps and therefore should not care about CORS? I might be wrong here, it's an interesting topic. I will soon develop my own NativeScript Vue mobile app, so I'm following this question to learn...

Marcus Höglund Over a year ago

@EdwinKrause good question! How does the native apps run? if it involes the browser, like for instance a pwa, then it's most likely the policys are implemented.

Edwin Krause Over a year ago

@MarkusHöglund I believe this article will help us answering this question. And yes, it's the same if you're using POSTMAN, there is no CORS restriction, as POSTMAN has no origin domain: stackoverflow.com/questions/49698909/…

tony19 Over a year ago

This isn't a CORS issue. If you open the API link indicated in the question, you'll see Access-Control-Allow-Origin: * in the response headers.

Collectives™ on Stack Overflow

Nativescript Axios Call to Web API

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related