J'essaie de créer une petite application sur Nativescript-vue où j'ai un framework backend laravel pour les appels d'API qui doit être appelé pour obtenir des données pertinentes. Par exemple, si l'utilisateur veut se connecter, il doit valider ses informations d'identification via l'API oauth/token, j'essaie donc de l'appeler via axios voici mon code :

Mon fichier settings.js contient.

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

Ceci est importé dans mes appels 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')
})

Lorsque j'essaie de compiler avec la commande tns debug android --bundle, j'obtiens chrome-devtools qui me montre :

api being called

En creusant plus profondément, je peux voir que les en-têtes sont transmis, mais ceux-ci ne sont que provisoires :

headers

Comme vous pouvez le voir, j'ai console.log dans mon application qui me montre :

console.log

Même lors de la compilation, j'obtiens les erreurs suivantes :

compiling error

Guidez-moi comment puis-je y parvenir. Merci.

Modifier:

De même, j'ai utilisé nativescript's propre http documentation quelque chose comme cette:

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

J'obtiens le même résultat, de plus j'ai essayé l'API depuis le serveur ex http://confidenceeducare.com/oauth/token c'est la même chose. L'application normale Vue appelle parfaitement l'API. Je suppose qu'il y a un problème avec l'application nativescript. Dois-je importer quelque chose de plus ? Je suis coincé avec ça.

Si quelqu'un pense que mon point de terminaison d'API est cassé, j'ai essayé d'utiliser les URL mentionnées dans l'exemple, c'est-à-dire https://httpbin.org/post :

http

Et:

enter image description here

Lorsque j'ai vérifié mon API dans postman, cela fonctionne là-bas, j'obtiens au moins une réponse avec le code d'état :

postman response

Modification 2 : Pour référence référentiel github https://github.com/nitish1986/sample_mobile_app

8
Nitish Kumar 15 mars 2019 à 16:57

2 réponses

Meilleure réponse

J'ai testé exactement le même projet que vous avez partagé dans Github avec Android 8.0, cela fonctionne parfaitement bien. L'appel axios atteint le bloc d'erreur car l'état de la réponse (error.response.status) est 401 et les données (error.response.data) renvoient exactement la même réponse que celle que vous voyez de Postman.

Si vous utilisez Android 9 ou une version ultérieure, cela peut échouer car vous n'avez pas activé useCleartextTraffic sur votre balise application dans le AndroidManifest.xml.

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

Avec iOS, cela échouerait également car vous n'avez pas activé la sécurité du transport des applications. Juste pour autoriser toutes les communications Http au sein de votre application, vous devez ajouter la clé suivante à votre info.plist

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

Si vous souhaitez autoriser uniquement des domaines spécifiques, utilisez la clé NSExceptionDomains et répertoriez les points de terminaison.

6
Manoj 24 mars 2019 à 19:57

Le problème est lié à la façon dont axios est importé. Essayer:

import axios from 'axios/dist/axios'

Cela résout également l'erreur Module not found: Error: Can't resolve 'net' in....

Lors de l'importation du package normalement, mes demandes ont échoué, renvoyant l'erreur

Error in v-on handler (Promise/async): "Error: Request failed with status code null"
2
belvederef 11 nov. 2019 à 22:53