asp.net-web-api - Nativescript Axios 调用 Web API
问题描述
我正在尝试在我的 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 } }
按照本文中发布的说明进行操作:进行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 } }
对于这个问题,我已经非常纠结下一步该做什么。请注意,使用我的 URL 的 console.log(response) 与文章中提供的 URL 存在一些差异。
我在 Postman 中尝试了我的 API 调用,我得到了一些数据。
我还尝试了 Postman 中的 Pokemon API 调用并获取了一些数据。所以不太确定接下来要调查哪件事。
更新:对于那些询问我的 WebAPI 的 URL 的人,我在这里: http ://angeloaa-001-site1.itemurl.com/menucategory
您甚至可以在浏览器(或邮递员)中尝试该链接,您也会看到返回的数据。
期待一些见解和回应,
解决方案
我注意到的一件事是您的 api 没有在响应中返回Access-Control-Allow-Origin标头,它只是一个空对象headers: {}
如果您查看Make HTTP Requests 文章的响应,它包含标头'access-control-allow-origin': '*'
为什么你需要这个标题?
默认情况下,浏览器实现同源策略,这基本上意味着您的浏览器将只允许您的代码从同源获取数据。所以如果你的 api 和你的客户端在不同的域下,你需要告诉浏览器允许两者之间的通信。这是通过启用 CORS、跨源请求共享来完成的,这基本上由api 响应中的Access-Control-Allow-Origin标头控制。
要在 api 中启用 cors,请遵循此
推荐阅读
- github - 为什么我的 gh-pages 的 unfurl 'og:image' 没有出现在任何平台上?
- python - 动态网格创建
- audio - 如何使用 ffmpeg 连接 3 个 mp4 文件(在结果视频中面临错误)?
- java - 从左到右而不是从右到左扫描字符串计算总数
- python-3.x - 从 Txt 文件中读取字典时出现 ValueError
- azure-devops - Azure Devops - 创建在所有其他触发管道之后运行的集成测试管道
- python - 如何根据从 jupyter lab/ipywidgets 的下拉列表中选择选项来创建嵌套小部件?
- ruby - 程序无响应但仍在运行
- python - 使用 Pandas 快速循环 - uszipcode
- javascript - 如何在 JavaScript (ES2020) 中检查值是否为空或未定义