How to resolve cors issue with below code. tried all the methods.
any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#ajaxbtn').click(function() {
$.ajax({
url: 'https://www.easyprogramming.net/heroes.json',
method: 'GET',
success: function(data) {
let html = '<table border="1"><tr><th>ID</th><th>Title</th></tr>';
data.slice(0, 5).forEach(function(post) {
html += '<tr><td>' + post.id + '</td><td>' + post.title + '</td></tr>';
});
html += '</table>';
$('#ajax-content').html(html);
}
});
});
});
</script>
</head>
<body>
<button id="ajaxbtn">AJAX Button</button>
<table id="heroesTable">
<thead>
<th>Name</th>
<th>Superhero Name</th>
<th>City</th>
</thead>
<tbody id="ajax-content"></tbody>
</table>
</body>
</html>
easyprogramming.netdoes not return CORS headers in the response to your request. This means that they are expressly disallowing any front-end JS client from making requests to them. There is nothing you, as a third-party developer can do about this, other than contact them and ask in the vain hope they enable CORS for your domain/wildcard. The alternative is for you to make the call to their domain from your server instead.