I'm new in React native developpement, i'm working on an app for packages inventory with Front-End React native and Backend-end DOT NET Core API.
I use Axios to call the APIs, my backend is set up to run with HTTPS on an IIS server.
when i test in local every thing works perfectly but when i test with the Back-End published the Axios return [Network Error].
i suspect the problem is from the HTTPS protocol but i'm n ot sure.
this is my Axis call:
axios.post(`https://company-soft.com/api/login`,
{
username:username,
password:password
})
.then((e)=>
{
console.log(e.data);
})
.catch((err)=>
{
console.log(`login error: ${e}`);
});
PS:i tested the API with Postman and it is responding fine.
i already tried some codes to override the SSL verifivation like the httpsAgent but i'v been told that it dosen't work with react Native.
is there a way to do it with Ract Native and Axios ??
Thanks a lot.
Related
I am new to Expo and I am trying to connect my frontend to my backend in ASP.NET 6.First I have modified in the launchSettings.json the applicationUrl to my IPV4 ip address and then I have also added CORS in the Program.cs :
builder.Services.AddCors(policyBuilder =>
policyBuilder.AddDefaultPolicy(policy =>
policy.WithOrigins("*").AllowAnyHeader().AllowAnyHeader())
);
var app = builder.Build();
app.UseCors();
Then I have made a simple get call using AXIOS like this :
GET AXIOS CALL in Expo
The error is always AXIOS Error Timeout Exceeded. ( or in this case [AxiosError: timeout of 5000ms exceeded] since I have set the timeout to 5000).
Tested the API with Postman and it works perfectly. To mention that my WIFI is private, my iOS is connected to the same WIFI as the laptop.
Tried to use fetch instead of AXIOS and the error is the same.
Does anyone have any solution ? I am strugling with this for like 2-3 days now..
Im working into a fullstack project node and vue js.
I deployed my project into Heroku. For the node part, all worked fined with the api. But I got an issue in the front part.
I created an environment variable to connect my app to my api. It's either the URL of the online API (in production) or the local adress (in developpement mode):
import axios from 'axios'
const apiEndpoint = process.env.VUE_APP_API_ENDPOINT || 'http://localhost:3000'
function getData (resp) { return resp.data }
function createCode (email, redirectURL) {
return axios.post(`${apiEndpoint}/auth/code?email=${encodeURIComponent(email)}&redirect_url=${encodeURIComponent(redirectURL)}`)
}
...
In heroku, I linked the variable to my API URL:
Heroku config vars
But after deployment, the app still points to localhost instead of the api URL.
If I put directly the api URL instead of the environment variable, it works fine. That's why I think the problem is the link between the env variable and heroku.
Do you know how I can manage the env variables between my Vue app and Heroku?
Thanks in advance.
I have a Vue.js project wrapped in an Electron app. From one of my components (src/components/MoviesTable.vue), I'm making an axios call to a local JSON file (public/data/multimedia.json), like this:
axios.get('./data/multimedia.json').then(res => {
this.movies = res.data.movies;
})
When I run npm run serve to serve the Vue app, I experience no issues. However, when I build the Electron app, I receive the error:
Access to XMLHttpRequest at '.../multimedia-index-app/dist/data/multimedia.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I've tried using proxies to no avail. I know that similar questions about CORS have been asked on SO, which offer different solutions, but I'm a noob, and I need clearer instructions than the ones that I've come across.
Please let me know if you require more information. Any help in resolving this problem would be greatly appreciated.
Thanks in advance.
If the JSON file should be bundled with the app, you don't need Axios, you can have Webpack load it:
import movies from './data/multimedia.json';
And use it in the component:
export default {
data() {
return {
movies
}
}
}
I have 2 items set up in Auth0:
Application - Single Page Application
API - Custom API, machine to machine
I've followed the instruction in the link below to call the custom API:
https://auth0.com/docs/quickstart/spa/vuejs/02-calling-an-api
I've downloaded the sample with settings configured for both items mentioned above. The Vue app are able to log in correctly, and are able to call the external API by using the downloaded example codes (the external API, "backend", in the example code was written in Node JS).
However, when I change the backend to my Laravel/Lumen app which already set up for item no.2 (custom API), the Vue app received 401 unauthorized error. So, I copied the access token retrieved through Vue:
const accessToken = await this.$auth.getTokenSilently();
console.log(accessToken);
And try to call the Lumen backend with this access token - and it works perfectly fine!
Is there a setting somewhere that I might've missed to enable Vue & Lumen to work with Auth0?
p/s: The custom Lumen API was made following the instruction from:
https://auth0.com/blog/developing-restful-apis-with-lumen/
Ok it turns out I made a mistake in the axios part of the sample code. The sample is using get, while my API is using post. So I ended up sending the header in the wrong axios parameter. Hope this helps someone that encountered the same problem.
i'm creating spa with vuejs 2 using laravel passport with the same tutorial like in laracast and there is something weird happening, i first using this api route for my api calls from vue using axios
Route::middleware('auth:api')->get('/get_artikel', 'ArtikelController#get_artikel');
and it works fine. But when i change it to this
Route::resource('artikel', 'ArtikelController');
and add __construct into ArtikelController for auth
public function __construct()
{
$this->middleware('auth');
}
its return 401 unathorized, even thought when i open inspector in chrome and in application tab i see laravel_token, laravel_session and XSRF-TOKEN in there.
so what is happening here? i do some searching and everybody say it works fine in ngix server and there is no working solution for apache server (i have tried all of it)
for the auth, passport and everything else i follow laravel documentation.