Nativescript Axios Call to Web API - asp.net-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,

Answer 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