Requête url qui renvoie un json
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:
1
2
3
4
5
6
7
| fetch(mon_url)
.then(response => {
return response.json();
})
.then(data => {
console.log(data)
}); |
Citation:
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:
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:
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)
}
} |
et dans le onClick du bouton, j'appelle makeAPICall()
J'ai pas d'erreur, mais ça me renvoie un objet json vide :
Code:
Object { data : { } }
Pourquoi?
Merci,
Nico
