Как вызвать axios / api call в приложении Nativescript - PullRequest
4 голосов
/ 15 марта 2019

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

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

headers

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

console.log

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

compiling error

Укажите мне, как я могу этого достичь. Спасибо.

Edit:

Точно так же я использовал 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 с конца сервера, например, http://confidenceeducare.com/oauth/token, он такой же. Обычное Vue приложение вызывает API совершенно нормально. Я думаю, что есть проблема с приложением nativescript. Нужно ли импортировать что-то еще? Я застрял с этим.

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

http

и

enter image description here

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

postman response

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

1 Ответ

2 голосов
/ 24 марта 2019

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

Если вы используете 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 и укажите конечные точки.

...