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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 :

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