Как вызвать вызов axios / api в приложении Nativescript

Я пытаюсь создать небольшое приложение на 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')
})

когда я пытаюсь построить с помощью команды tns debug android --bundle, я получаю chrome-devtools, который показывает мне:

вызывается api

Углубившись в это, я вижу, что заголовки передаются, но они только предварительные:

заголовки

Как видите, в моем приложении console.log показано:

console.log

Даже при компиляции я получаю следующие ошибки:

ошибка компиляции

Направь меня, как мне этого добиться. Спасибо.

Изменить:

Точно так же я использовал nativescript's собственную http документацию примерно так:

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')
});

Я получаю тот же результат, более того, я пробовал api со стороны сервера ex http://confidenceeducare.com/oauth/token бывает так же. Обычное Vue приложение прекрасно вызывает API. Я предполагаю, что с приложением nativescript возникла какая-то проблема. Мне нужно импортировать что-то еще? Я застрял в этом.

Если кто-то думает, что моя конечная точка api сломана, я попытался использовать URL-адреса, упомянутые в примере, то есть https://httpbin.org/post:

http

а также:

введите описание изображения здесь

Когда я проверил свой api в postman, он там работает, я получаю как минимум ответ с кодом состояния:

ответ почтальона

Изменить 2: для справки репозиторий github https://github.com/nitish1986/sample_mobile_app


person Nitish Kumar    schedule 15.03.2019    source источник
comment
Основываясь на большей части того, что вы напечатали, и очень быстро взглянув на Axios; он не будет работать на NativeScript - он разработан для Node. Все, что использует библиотеки для конкретных узлов, не работает с NativeScript. Теперь что касается вашего редактирования; этот код должен действительно работать; какую ошибку вы видите при использовании http-кода nativescript?   -  person Nathanael    schedule 19.03.2019
comment
@Nathanael Я не получаю никаких ошибок, он просто ждет ответа, даже в командной строке он просто ждет ответа, и я не знаю, почему это отображается как документ в консоли Chrome, несмотря на то, что это запрос XHR .   -  person Nitish Kumar    schedule 19.03.2019
comment
Все, что вы опубликовали, должно работать. Это может быть полезно nativescript.org/blog/   -  person Narendra    schedule 19.03.2019
comment
@NarendraMongiya Это то, что меня беспокоит больше, везде, где я исследовал, говорится, что ваш код в порядке и должен работать.   -  person Nitish Kumar    schedule 20.03.2019
comment
возможно ли создать детскую площадку?   -  person Narendra    schedule 20.03.2019
comment
или гитхаб может быть?   -  person Narendra    schedule 20.03.2019
comment
@NarendraMongiya Вы можете найти это здесь! github.com/nitish1986/sample_mobile_app   -  person Nitish Kumar    schedule 20.03.2019
comment
@NitishKumar Предполагая, что этот бэкэнд работает локально, уверены ли вы, что устройство, на котором вы тестируете, действительно может связаться с ним?   -  person Dexter    schedule 22.03.2019
comment
@NitishKumar Вы уверены, что правильно используете Axios? Мне обычно нужно передать какую-нибудь { withCredentials: true } опцию, чтобы он работал с аутентификацией? И, вероятно, вам не нужен ваш объект authHeader   -  person Andria    schedule 23.03.2019
comment
@Dexter Да, он работает нормально, поэтому я поделился i.stack.imgur.com/ IPJhf.png это последнее изображение   -  person Nitish Kumar    schedule 23.03.2019
comment
@ ChrisBrownie55 Да, я не думаю, что это проблема.   -  person Nitish Kumar    schedule 23.03.2019


Ответы (2)


Я протестировал тот же самый проект, который вы опубликовали в Github, с Android 8.0, он отлично работает. Вызов axios попадает в блок ошибки, поскольку статус ответа (error.response.status) равен 401, а данные (error.response.data) возвращают точно такой же ответ, который вы видите от Postman.

Если вы используете Android 9 или более позднюю версию, это может привести к сбою, поскольку вы не включили useCleartextTraffic в своем теге application в файле AndroidManifest.xml.

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

С iOS тоже не получится, так как вы не включили безопасность транспорта приложений. Чтобы разрешить все протоколы Http в вашем приложении, вам нужно добавить следующий ключ в свой info.plist

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

Если вы хотите разрешить только определенные домены, используйте ключ NSExceptionDomains и укажите конечные точки.

person Manoj    schedule 24.03.2019
comment
Я думаю, что в AndroidManifest.xml должна быть еще какая-то конфигурация, но все же вы дали мне представление об этом. Большое спасибо!!! - person Nitish Kumar; 25.03.2019

Проблема связана с тем, как импортируются аксиомы. Пытаться:

import axios from 'axios/dist/axios'

это также решает ошибку Module not found: Error: Can't resolve 'net' in....

При импорте пакета обычно мои запросы терпели неудачу, возвращая ошибку

Error in v-on handler (Promise/async): "Error: Request failed with status code null"
person belvederef    schedule 11.11.2019