React Native (Expo) & NodeJS fastify
Bonjour à tous,
Pour information j'uitlise un Mac et un Iphone.
J'ai un soucis de communication avec mon API NodeJS et mon application React Native Expo.
Voici mon serveur :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| import fastify from 'fastify';
import systemesRoutes from './routes/systemesRoute';
import entreprisJesRoutes from './routes/Entreprise/entrepriseRoute';
import fastifySwagger from '@fastify/swagger';
import fastifySwaggerUi from '@fastify/swagger-ui';
import { swaggerOptions, swaggerUiOptions } from './plugins/swagger';
import cors from '@fastify/cors';
const server = fastify();
// Enregistrement des plugins Swagger avec la configuration importée
server.register(fastifySwagger, swaggerOptions);
server.register(fastifySwaggerUi, swaggerUiOptions);
// Configuration de CORS pour Fastify
const corsOptions = {
origin: '*', // Configurez l'origine selon vos besoins
methods: ['GET', 'POST', 'OPTIONS', 'PUT', 'PATCH', 'DELETE'], // Méthodes autorisées
allowedHeaders: ['Content-Type', 'Authorization', 'x-access-token', 'Origin', 'X-Requested-With', 'Accept'], // En-têtes autorisés
exposedHeaders: ['Content-Range', 'X-Content-Range'], // En-têtes exposés
credentials: true, // Autorise l'envoi des cookies
};
// Enregistrement du plugin Fastify CORS
server.register(cors, corsOptions);
// Enregistrement des routes
server.register(systemesRoutes);
server.register(entreprisesRoutes);
// Ecoute du serveur
server.listen({ port: 8080 }, (err, address) => {
if (err) {
console.error('Error starting the server:', err);
process.exit(1);
}
console.log(`Server listening at ${address}`);
}); |
J'ai par exemple une route entreprises qui fonctionne très bien sur Postman et mon navigateur, cependant que j'essaye de l'appeler via expo :
Instance Axios react native :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| import axios from 'axios';
const API_URL = 'http://localhost:8080/';
const instanceAxios = axios.create({
baseURL: API_URL,
headers: {
'Content-Type': 'application/json',
// Autres en-têtes communs...
},
});
// Ajouter un intercepteur pour gérer les erreurs
instanceAxios.interceptors.response.use(
response => response,
error => {
if (error.response) {
// Le serveur a renvoyé une réponse avec un code d'erreur
console.error('Server responded with an error:', error.response.status);
} else if (error.request) {
// La requête a été faite mais aucune réponse n'a été reçue
console.error('No response received:', error.request);
} else {
// Une erreur s'est produite lors de la configuration de la requête
console.error('Request failed:', error.message);
}
return Promise.reject(error);
}
); |
// Vous pouvez également ajouter d'autres intercepteurs pour les requêtes, les réponses, etc.
export default instanceAxios;
Mon appel :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| // Méthode pour récupérer les entreprises en tendance
async getTrendingEnterprises() {
try {
console.log('Tendance')
//entreprises/tendances
//localhost
const response = await axiosInstance.get('entreprises/tendance');
console.log('ici')
console.log(response)
return response.data;
} catch (error) {
throw new Error(error);
}
}, |
Mon erreur :
Citation:
iOS Bundling complete 52ms
LOG Tendance
ERROR No response received: {"DONE": 4, "HEADERS_RECEIVED": 2, "LOADING": 3, "OPENED": 1, "UNSENT": 0, "_aborted": false, "_cachedResponse": undefined, "_hasError": true, "_headers": {"accept": "application/json, text/plain, */*"}, "_incrementalEvents": false, "_lowerCaseResponseHeaders": {}, "_method": "GET", "_perfKey": "network_XMLHttpRequest_http://localhost:8080/entreprises/tendance", "_performanceLogger": {"_closed": false, "_extras": {}, "_isLoggingForWebPerformance": false, "_pointExtras": {}, "_points": {"initializeCore_end": 241067806.532208, "initializeCore_start": 241067728.404041}, "_timespans": {"network_XMLHttpRequest_http://192.168.0.204:8081/logs": [Object], "network_XMLHttpRequest_http://localhost:8080/entreprises/tendance": [Object]}}, "_requestId": null, "_response": "Could not connect to the server.", "_responseType": "", "_sent": true, "_subscriptions": [], "_timedOut": false, "_trackingName": "unknown", "_url": "http://localhost:8080/entreprises/tendance", "readyState": 4, "responseHeaders": undefined, "status": 0, "timeout": 0, "upload": {}, "withCredentials": true}
ERROR Error fetching trending enterprises: [Error: AxiosError: Network Error]
Je pensais à un probléme de cors mais je les ai ajouté à mon api mais ça ne fonctionne pas sur iphone mais ça fonctionne sur mon navigateur web sur mac et postman
Avez-vous des pistes ?
Merci d'avance
