Discussion :

[Law13000]

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

[CHAF007]

La question est ancienne, mais la réponse peut aider quiconque arrive ici.

Le CORS n'est pas lié car ce n'est que pour les navigateurs. Tu utilises le simulateur sur ton mac ou ton iphone physique ?
Si c'est ton iphone phyisque, l'URL ne peut pas être "localhost".

1. Mets le mac et l'iphone sur le même réseau (e.g. le Wifi de chez toi)
2. Récupère l'adresse IP locale de ton mac (ifconfig)
3. Change "http://localhost:8080" en "http://192.168.0.12:8080" (remplace 192.168... par l'IP locale de ton mac)
4. Assure-toi que le binding du serveur est sur 0.0.0.0 et non sur localhost

Et là ça devrait fonctionner correctement.