Nativescript Axios 调用 Web API
Nativescript Axios Call to Web API
我正在尝试在我的 NativeScript-Vue 应用程序上对 ASP.Net WebAPI 后端执行 axios GET 调用。
在 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 } }
按照本文中发布的说明进行操作：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（响应）与文章中提供的 URL 存在一些差异。
我在 Postman 中尝试了 API 调用，我正在获取一些数据。
我还尝试了在 Postman 中调用 Pokemon API 并获取了一些数据。所以不太确定接下来要调查哪件事。
更新：对于那些询问 URL 我的网站 API 的人，我在这里提供：
http://angeloaa-001-site1.itempurl.com/menucategory
您甚至可以在浏览器（或邮递员）中尝试 link，您也会看到返回的数据。
期待一些见解和回应，
我注意到的一件事是您的 api 没有 return 响应中的 Access-Control-Allow-Origin header，它是只是一个空 object headers: {}
如果您查看 发出 HTTP 请求文章 的响应，它包含 header 'access-control-allow-origin': '*'
为什么你需要这个 header？
默认情况下，浏览器实现了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，它基本上是由Access-Control-Allow-Origin header控制在api响应。
要在 api 中启用 cors，请遵循 this
我正在尝试在我的 NativeScript-Vue 应用程序上对 ASP.Net WebAPI 后端执行 axios GET 调用。
在 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 } }
按照本文中发布的说明进行操作：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（响应）与文章中提供的 URL 存在一些差异。
我在 Postman 中尝试了 API 调用，我正在获取一些数据。
我还尝试了在 Postman 中调用 Pokemon API 并获取了一些数据。所以不太确定接下来要调查哪件事。
更新：对于那些询问 URL 我的网站 API 的人，我在这里提供： http://angeloaa-001-site1.itempurl.com/menucategory
您甚至可以在浏览器（或邮递员）中尝试 link，您也会看到返回的数据。
期待一些见解和回应，
我注意到的一件事是您的 api 没有 return 响应中的 Access-Control-Allow-Origin header，它是只是一个空 object headers: {}
如果您查看 发出 HTTP 请求文章 的响应，它包含 header 'access-control-allow-origin': '*'
为什么你需要这个 header？
默认情况下，浏览器实现了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，它基本上是由Access-Control-Allow-Origin header控制在api响应。
要在 api 中启用 cors，请遵循 this