const btn = document.querySelector('.btn');
const h1 = document.querySelector('h1');
const output = document.querySelector('.output');
const inputVal = document.querySelector('.val');
const url1 = 'https://samples.openweathermap.org/';
const url2 = 'https://cors-anywhere.herokuapp.com/';
btn.textContent = 'Click Me';
btn.addEventListener('click', (e) => {
//console.log('ready');
getValues(url2 + url1);
})
function getValues(url){
fetch(url)
.then(rep => rep.json())
.then(data => {
maker(data.products.forecast_5days);
})
}
function maker(data){
//console.log(data.docs);
data.samples.forEach((el)=>{
getMore(url2 + el);
})
}
function getMore(url){
fetch(url)
.then(rep => rep.json())
.then(data => {
adder(data);
})
}
function adder(data){
console.log(data.list);
const city = data.city;
const div = document.createElement('div');
output.append(div);
div.innerHTML = `${city.name} ${city.country} <br>
${city.coord.lat} ${city.coord.lon}`;
}
<!DOCTYPE html>
<html>
<head>
<title>JavaScript JSON</title>
<style>
</style>
</head>
<body>
<h1>JSON</h1>
<input type="text" class="val">
<button class="btn">Click</button>
<div class="output"></div>
<script src="app6.js"></script>
</body>
</html>This API enables cross-origin requests to anywhere. Usage: / Shows help /iscorsneeded This is the only resource on this host which is served without CORS headers. /<url> Create a request to <url>, and includes CORS headers in the response. If the protocol is omitted, it defaults to http (https if port 443 is specified). Cookies are disabled and stripped from requests. Redirects are automatically followed. For debugging purposes, each followed redirect results in the addition of a X-CORS-Redirect-n header, where n starts at 1. These headers are not accessible by the XMLHttpRequest API. After 5 redirects, redirects are not followed any more. The redirect response is sent back to the browser, which can choose to follow the redirect (handled automatically by the browser). The requested URL is available in the X-Request-URL response header. The final URL, after following all redirects, is available in the X-Final-URL response header. To prevent the use of the proxy for casual browsing, the API requires either the Origin or the X-Requested-With header to be set. To avoid unnecessary preflight (OPTIONS) requests, it's recommended to not manually set these headers in your code. Demo : https://robwu.nl/cors-anywhere.html Source code : https://github.com/Rob--W/cors-anywhere/ Documentation : https://github.com/Rob--W/cors-anywhere/#documentation
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit loading of resources. CORS also relies on a mechanism by which browsers make a “preflight” request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.
An example of a cross-origin request: the front-end JavaScript code served from https://domain-a.com uses XMLHttpRequest to make a request for https://domain-b.com/data.json.
For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from unless the response from other origins includes the right CORS headers.