Nativescript Axios Call to Web API - PullRequest
Новая
       30

Nativescript Axios Call to Web API

0 голосов
/ 18 октября 2018

Я пытаюсь выполнить axio GET-вызов в моем приложении NativeScript-Vue для серверной части ASP.Net WebAPI.

В веб-приложении VueJS я использую следующий код: 

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

И приведенный выше код работает нормально.Но как только я использую его в своем приложении NativeScript Vue, я ничего не получаю.

Файл console.log показывает следующее: 

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

Следуя инструкциям, опубликованным в этой статье: Выполнение запросов Http Я могу получить некоторые данные (в значительной степени я заменил свой URL в приведенном выше примере кода, чтобы указать на URL-адрес в статье.

Я провел некоторое исследование, и я такжеобнаружил, что в инструментах отладки Chrome это то, что возвращается статьей Make HTTP Requests: 

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

Я уже застрял на том, что делать дальше для этой проблемы. Обратите внимание, что есть некоторая разница вconsole.log (ответ) с использованием моего URL-адреса и URL-адреса, приведенного в статье.

Я попробовал свой вызов API в Postman и получил некоторые данные.

Я также попробовал Pokemon APIпозвоните в «Почтальон» и получите некоторые данные. Так что я не совсем уверен, что делать дальше.

ОБНОВЛЕНИЕ: Для тех, кто спрашивает URL моего WebAPI, он у меня здесь: http://angeloaa-001-site1.itempurl.com/menucategory

Вы можете попробовать эту ссылку даже в браузере (или почтальоне), и вы также увидите, что данные возвращаются.

Просмотржду некоторых идей и ответов,

1 Ответ

0 голосов
/ 18 октября 2018

Я заметил одну вещь: ваш API не возвращает в ответ заголовок Access-Control-Allow-Origin , это просто пустой объект headers: {}

Если вы посмотритев ответ на статью Make HTTP Requests он содержит заголовок 'access-control-allow-origin': '*'

А зачем вам этот заголовок?

По умолчанию браузер реализует та же политика происхождения , которая в основном означает, что ваш браузер будет позволять вашему коду получать данные только из одного источника.Так что, если ваш API и ваш клиент находятся в разных доменах, вы должны указать браузеру разрешить связь между ними.Это достигается путем включения CORS, совместного использования запросов перекрестного источника , который в основном контролируется заголовком Access-Control-Allow-Origin в ответе API.

Комувключите Cors в API, следуйте это

...