Requête url qui renvoie un json

**DiverSIG** · 17/03/2025, 15h38

Bonjour,

J'ai une url qui me renvoie un json.

Dans mon appli React, j'ai un bouton, quand je clique dessus, je voudrais récupérer les données de ce json pour les afficher dans une table.
Si je fais un fetch(mon_url), j'ai un message d'erreur (problème de requêtes multiorigines ...) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
fetch(mon_url)
      .then(response => {
        return response.json();
      })
      .then(data => {
        console.log(data)
      });

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante

J'ai essayé d'implémenter le backend dans lequel je met :

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
const express = require('express')
const app = express()
const port = 3001
 
app.get('/', (req, res) => {
  res.status(200).send('Hello World!');
})
 
 
app.use(express.json())
 
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Access-Control-Allow-Headers');
  next();
});
 
app.get('/mon_resultat', (req, res) => {
  fetch(mon_url)
  .then(response => {
    res.status(200).send(response);
  })
  .catch(error => {
    res.status(500).send(error);
  })
})

puis dans mon code front :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
const makeAPICall = async () => {
    try {
      const response = await fetch('http://localhost:3001/mon_resultat');
      const data = await response.json();
      console.log({ data })
    }
    catch (e) {
      console.log(e)
    }
  }