How to add data to a json file on github? (Using Axios)

Question

So, I am trying to add data to a json file on github and I am getting this error code ` // Read in the existing data from the file const url = 'https://username.github.io/path/tiles.json';

        axios.get(url)
        .then(response => {
        const data = response.data;

        // Add the new data to the existing data
        data.push(newData);

        // Write the updated data back to the file
        axios.post(url, data, {
            headers: {
            'Content-Type': 'application/json'
            }
        })
        .then(response => {
            message_correct('Data added successfully.');
        })
        .catch(error => {
            message_error('Error adding data.', error);
        });
        })
        .catch(error => {
        message_error('Error reading data.', error);
        });`

this is the error: Access to XMLHttpRequest at 'https://username.github.io/path/tiles.json' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I want to add data to the file

score 1 · Accepted Answer · answered May 19 '23 at 05:50

You have to make an HTTP request to a URL that is designed to allow the data to be changed.

You can't make a POST request to any old URL that returns JSON when you make a GET request. If you could, it would be a major security problem and most websites would be vandalised every few seconds.

Github provide an API for creating / updating file contents.

I've no idea if it is is accessible from browser-side JavaScript though.

That said, whatever your reasons for wanting to update the JSON, a better solution would probably be to invest in some real hosting and use a database with some server side code.

How to add data to a json file on github? (Using Axios)

1 Answers1