Nativescript Axios 调用 Web API

Posted

技术标签:

【中文标题】Nativescript Axios 调用 Web API【英文标题】:Nativescript Axios Call to Web API 【发布时间】:2019-03-22 21:33:42 【问题描述】:

我正在尝试在我的 NativeScript-Vue 应用程序上对 ASP.Net WebAPI 后端进行 axios GET 调用。

在 VueJS Web 应用程序中,我使用以下代码:

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  

按照本文发布的说明进行操作:Make Http Requests 我能够获取一些数据(几乎我在上面的示例代码中替换了我的 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  

对于这个问题,我已经非常纠结下一步该做什么。请注意,使用我的 URL 的 console.log(response) 和文章中提供的 URL 存在一些差异。

我在 Postman 中尝试了我的 API 调用,我得到了一些数据。

我还尝试了 Postman 中的 Pokemon API 调用并获取了一些数据。所以不太确定接下来要调查哪件事。

更新:对于那些询问我的 WebAPI 的 URL 的人,我在这里: http://angeloaa-001-site1.itempurl.com/menucategory

您甚至可以在浏览器(或邮递员)中尝试该链接,您也会看到返回的数据。

期待一些见解和回应,

【问题讨论】:

您是否尝试过使用内置的http 模块,如demo 所示? 【参考方案1】:

我注意到的一件事是您的 api 没有在响应中返回 Access-Control-Allow-Origin 标头,它只是一个空对象headers:

如果您查看 Make HTTP Requests 文章 的响应,它包含标题 'access-control-allow-origin': '*'

为什么你需要这个标题?

默认情况下,浏览器实现same origin policy,这基本上意味着您的浏览器将只允许您的代码从同一来源获取数据。所以如果你的 api 和你的客户端在不同的域下,你需要告诉浏览器允许两者之间的通信。这是通过启用 CORS cross origin request sharing 来完成的,它基本上由 api 响应中的 Access-Control-Allow-Origin 标头控制。

要在api中启用cors,请关注this

【讨论】:

NativeScript Vue 应用程序不是“本机”移动应用程序,因此不应该关心 CORS?我可能在这里错了,这是一个有趣的话题。我将很快开发自己的 NativeScript Vue 移动应用程序,所以我正在关注这个问题来学习...... @EdwinKrause 好问题!原生应用程序如何运行?如果它涉及浏览器,例如 pwa,那么很可能是策略已实施。 @MarkusHöglund 我相信这篇文章将帮助我们回答这个问题。是的,如果你使用 POSTMAN 也是一样,没有 CORS 限制,因为 POSTMAN 没有源域:***.com/questions/49698909/… 这不是 CORS 问题。如果您打开问题中指示的 API 链接,您将在响应标头中看到 Access-Control-Allow-Origin: *

以上是关于Nativescript Axios 调用 Web API的主要内容,如果未能解决你的问题,请参考以下文章

Nativescript-Vue 和 Axios 工作功能导致“错误:请求失败,状态码 429”

如何使用 Nativescript Vue 和 Axios 显示 API 数据

带有 Vuex 和 Axios 的 NativeScript-Vue 未定义状态错误

tns 预览不适用于带有 nativescript-vue 的 android

来自另一个路径的模型类在 NativeScript 中引发错误调用模块

[翻译]Nativescript 中 Web 视图与 Android/IOS 的双向通信