Message d'erreur access to fetch
Bonjour,
Je reçois ce message d'erreur avez vous une idée ?
Citation:
Access to fetch at 'http://freegeoip.net/json/87.65.12.100' from origin 'http://weather' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
app.js:12 GET
http://freegeoip.net/json/87.65.12.100 net::ERR_FAILED
main @ app.js:12
async function (async)
main @ app.js:10
(anonymous) @ app.js:33
app.js:22 Uncaught (in promise) TypeError: Failed to fetch
mon code source index.html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>La météo chez vous !</title>
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css">
</head>
<body>
<section id="app">
<h1>
<span id="ville">Marseille</span>
<span class="tooltip">Tapez une autre ville si vous le souhaitez</span>
</h1>
<i class="wi wi-day-rain"></i>
<h2>
<span id="temperature">25</span> C° (<span id="conditions">Ciel dégagé</span>)
</h2>
</section>
<script src="app.js"></script>
</body>
</html> |
mon fichier app.js
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
|
function capitalize(str){
return str[0].toUpperCase() + str.slice(1);
}
async function main(){
const ip = await fetch('https://api.ipify.org?format=json')
.then(resultat => resultat.json())
.then(json => json.ip);
const ville = await fetch('http://freegeoip.net/json/' + ip)
.then(resultat => resultat.json())
.then(json => json.city);
const meteo = await fetch('http://api.openweathermap.org/data/2.5/weather?q=${ville}&appid=58b98cab72465e9c2fb8a950623b8f03&lang=fr&units=metric')
.then(resultat => resultat.json())
.then(json => json)
// afficher les inofrmations sur la page
displayWeatherInfos(meteo)
}
function displayWeatherInfos(data) {
const name = data.name;
const temperature = data.main.temp;
const conditions = data.weather[0].main;
const description = data.weather[0].description;
document.querySelector('#ville').textContent = name;
document.querySelector('#temperature').textContent = Math.round(temperature);
document.querySelector('#conditions').textContent = capitalize(description);
}
main(); |
