Attempt to periodically load remote JSON data (error: Origin is not permitted by Access-Control-Allow-Origin)

Question

Attempt to periodically load remote JSON data (error: Origin is not permitted by Access-Control-Allow-Origin)

My goal is to regularly load a .json file containing some information, and here is the code I have come up with:

var updateIBEX35 = function () {
    var ibexText = document.getElementById("IBEX");

    let url = 'https://www2.ecobolsa.com/js/data/i35.json';
    fetch(url).then(res => res.json()).then((out) => {
        alert(out[0].p); // for debugging purposes
    }) .catch(err => alert(err));
}

var intervalID = setInterval(updateIBEX35, 1000);
// clearInterval(intervalID);

However, I encountered an error which states:

[Error] Origin http://localhost is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin http://localhost is not allowed by Access-Control-Allow-Origin. (i35.json, line 0)
[Error] Fetch API cannot load https://www2.ecobolsa.com/js/data/i35.json. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

By the way, I am using macOS Sierra with Apache, and I attempted to modify the "httpd.conf" or the user file (/etc/apache2/users/Daniel.conf) by adding the following:

Header set Access-Control-Allow-Origin "*"

Unfortunately, the solution did not work as expected :(

javascript json macos apache

Answer 1

Answer №1

Modifying the configuration on your end won't make any difference. The API endpoint you're attempting to access doesn't permit cross-origin requests.

You can either save the data in a local JSON file and then retrieve it, or reach out to the website administrator to enable CORS requests.

Answer 2

Modifying the configuration on your end won't make any difference. The API endpoint you're attempting to access doesn't permit cross-origin requests.

You can either save the data in a local JSON file and then retrieve it, or reach out to the website administrator to enable CORS requests.

Answer 3

Answer №2

It appears that Apache is being used, so if you are also serving PHP pages, why not consider creating a "proxy" that retrieves JSON data and then serves it from the same domain? This approach could effectively resolve your cross-origin issue.

<?php
header('Content-Type: application/json');
echo file_get_contents('https://www.example.com/data/example.json');
?>

Answer 4

It appears that Apache is being used, so if you are also serving PHP pages, why not consider creating a "proxy" that retrieves JSON data and then serves it from the same domain? This approach could effectively resolve your cross-origin issue.

<?php
header('Content-Type: application/json');
echo file_get_contents('https://www.example.com/data/example.json');
?>

Answer 5

Answer №3

Glad to share that I was able to resolve my issue by utilizing jQuery in combination with php:

Below is the content of the js file:

var url = 'https://www2.ecobolsa.com/js/data/i35.json';

var updateIBEX35 = function () {
    $.post('php/decodeJSON.php', { url: url }, function(data) {
        $("#IBEX").text(data);        
    });
}

setInterval(updateIBEX35, 10000);

Here is the content of the decodeJSON.php file:

<?php
    $url = $_POST['url'];
    echo 'IBEX35: '.json_decode(file_get_contents($url))->{0}->{p};
?>

Answer 6

Glad to share that I was able to resolve my issue by utilizing jQuery in combination with php:

Below is the content of the js file:

var url = 'https://www2.ecobolsa.com/js/data/i35.json';

var updateIBEX35 = function () {
    $.post('php/decodeJSON.php', { url: url }, function(data) {
        $("#IBEX").text(data);        
    });
}

setInterval(updateIBEX35, 10000);

Here is the content of the decodeJSON.php file:

<?php
    $url = $_POST['url'];
    echo 'IBEX35: '.json_decode(file_get_contents($url))->{0}->{p};
?>

Attempt to periodically load remote JSON data (error: Origin is not permitted by Access-Control-Allow-Origin)

Answer №1

Answer №2

Answer №3

Similar questions

Using jQuery along with the jQuery Form Plugin to retrieve and parse the plain text responseText from an Ajax

Troubleshooting EACCES issue with Node.js Express app deployed on Heroku and port 80:0.0.0

Is there any purpose to incorporating an AngularJS directive within a comment?

reveal the concealed divs within the list elements

Is there a method to remove a buffer in threejs in order to minimize GPU memory leakage?

The React render function fails to display the components it is supposed to render

Issue: Unable to deserialize Entities.Student object from START_ARRAY token in com.fasterxml.jackson.databind.JsonMappingException

Loading JSON data asynchronously in iOS devices can be accomplished in a few simple steps

Awesome method of redirecting outdated URLs to the most recent established URL

Compel instantaneous XMLHttpRequest / Ajax without any prior notification

Exploring the process of iterating through a JSON response in PHP to extract all values

When utilizing forEach to loop through and interact with elements in React Testing Library, the onClick event handler is not triggered. However, employing a for loop successfully triggers the

Moving from ngRoute to ui-router in AngularJS is causing a [$injector:unpr] error to be thrown

What could be the reason that Vue is not evaluating anything when the directive @click is specified as "true && method"?

Is it possible for jsonpath-plus to rearrange elements as child elements?

Javascript functions properly on Chrome, Opera, and Edge browsers, but unfortunately does not work on FireFox and IE 11

Is there a way to change HTML retrieved from an AJAX request before inserting it into the document?

Sending data from an AJAX POST request to a Grails Controller

Combine values from a JSON string using a line break

Implement a function to trigger and refresh components in various Vuejs2 instances simultaneously