In my development process, I am working on creating a small application using Nativescript-vue. This application requires backend functionality that is built on the laravel framework for making API calls to retrieve relevant data. For example, when a user wants to login, their credentials need to be validated through an API call to oauth/token using axios. Below is a snippet of the code:
The settings.js file contains the following:
export const authHeader = {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
This is then imported and used within axios calls:
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')
})
During the build process with the command tns debug android --bundle, I encounter the chrome-devtools showing issues related to headers being only provisional:
I have added some console.log statements in the application which reveal:
Further inspection also shows various errors during compilation:
If anyone has insights on how to resolve this issue, it would be greatly appreciated. Thank you.
Edit:
Additionally, I attempted to use Nativescript's built-in http module by referring to the official 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 received')
}
}, (e) => {
console.log('Something went wrong')
});
Despite trying different endpoints like , the results remain consistent. Strangely, Vue applications seem to handle these API calls without any issues. Could there be additional dependencies or configurations needed in Nativescript? Your help is much appreciated as I am currently stuck.
For verification purposes, I tested the APIs using URLs from examples such as https://httpbin.org/post:
and:
When testing in postman, I did receive responses along with status codes:
Edit 2: To access the GitHub repository for reference, visit https://github.com/nitish1986/sample_mobile_app