我正在try 在Nativescript-vue上构建一个小型应用程序,我有一个后端laravel框架,用于api调用,需要调用它来获取相关数据.例如,如果用户想要登录,他需要通过api oauth/token验证其凭据,所以我试图通过axios调用它.下面是我的代码:

我的settings.js文件包含.

export const authHeader = {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
}

这是在我的axios调用中导入的:

const postData = {
    grant_type: 'password',
    username: user.email,
    password: user.password,
    client_id: clientId,
    client_secret: clientSecret,
    scope: '',
    provider: provider
}
const authUser = {}
axios.post(authUrl, postData, {headers: authHeader}).then(response => {
    console.log('Inside oauth/token url')
    if(response.status === 200)
    {
        console.log('response received')
    }
})
.catch((err) => {
    if(err.response.status === 401){
       reject('Validation error')
    }
    else
       reject('Something went wrong')
})

当我try 使用命令tns debug android --bundle构建时,我得到了chrome-devtools,这表明:

api being called

深入挖掘,我可以看到标题正在通过,但这些只是暂时的:

headers

正如你所看到的,我的应用程序中有console.log个显示:

console.log

即使在编译时,我也会出现以下错误:

compiling error

指导我怎样才能做到这一点.谢谢

Edit:

类似地,我使用了nativescript's own http documentation类似的东西:

const httpModule = require("http");

httpModule.request({
    url: "http://iguru.local/oauth/token",
    method: "POST",
    headers: { "Content-Type": "application/json" },
    content: JSON.stringify({
        grant_type: 'password',
        username: this.user.email,
        password: this.user.password,
        client_id: 'check',
        client_secret: 'check',
        scope: '',
        provider: 'check'
    })
}).then((response) => {
    // Argument (response) is HttpResponse
    console.log('Action called')
    if(response.status === 200)
    {
        console.log('Response recieved')
    }
}, (e) => {
    console.log('Something went wrong')
});

我得到了同样的结果,而且我try 了服务器端ex http://confidenceeducare.com/oauth/token的api,结果恰好是一样的.普通Vue应用程序对api的调用非常好.我猜nativescript应用程序有问题.我需要进口更多的东西吗?我受够了.

如果有人认为我的api端点被 destruct 了,我try 使用示例https://httpbin.org/post中提到的URL:

http

以及:

enter image description here

当我在postman中判断我的api时,它正在那里工作,我至少得到了一个带有状态代码的响应:

postman response

Edit 2:

推荐答案

我测试了你在Github中与Android 8.0共享的同一个项目,它运行得非常好.axios调用命中错误块,因为响应状态(error.response.status)为401,数据(error.response.data)返回与您从Postman看到的完全相同的响应.

如果您使用的是Android 9或更高版本,它可能会失败,因为您在AndroidManifest.xml中没有在application标签上启用useCleartextTraffic.

<application 
        android:usesCleartextTraffic="true"
        android:name="com.tns.NativeScriptApplication"

iOS也会失败,因为你没有启用应用程序传输安全.为了允许应用程序中的所有Http通信,您必须将以下密钥添加到info.plist

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

如果您只想允许特定的域,那么使用NSExceptionDomains键并列出端点.

Vue.js相关问答推荐

Nuxt 3翻转本视频

虚拟DOM在Vue中姗姗来迟

在哪里可以找到在线沙箱 Vuetify 3 模板来创建最小的可重现示例?

Vuetify右侧并排switch

Vuetify 复选框未正确显示值

使用 nuxt.js 组件自动导入对性能不利吗?

如何为 Vue 应用提供 robots.txt

在没有组件的vue js中拖放

如何将 vue.js 与 gulp 一起使用?

Vue.js 从模板中分离样式

POST 文件连同表单数据 Vue + axios

vuejs中通过变量动态调用方法

如何将 v-if 与 Vue.js 中的值进行比较

如何在生产模式下为 chrome 扩展启用 Vue devtools?

重新加载页面正在 vue 组件中的插槽上闪烁内容

了解 Nuxt.js 中的State状态和Getters:Getters不起作用

来自 Vue.js 的 ESLint 插件的消息中的LHS是什么意思?

Axios 请求拦截器在我的 vue 应用程序中不起作用

Vue.js 3 - 替换/更新react性对象而不会失go react性

如何在布局中使用组件?