Private repo: Test website

[ultraJorge]

I have started a simple private repo, with an index.html which has a javascript that needs to fetch(data.txt).

After many many failed attempts, i managed to finally preview the website by clicking raw, which generates a temporary token, and then using

https://htmlpreview.github.io/?https://raw.githubusercontent.com/[USER]/[REPO]/main/index.html?token=[TOKEN]

But of course the script won't work, because it can't access data.txt.
Thus, I suppose I need a permanent token, to both look at the website and for the script to access data.txt with.
I tried to generate personal access tokens, first classic and now fine-grained, which should have read access to the content of the repo. However, using this token in the previous url results in "TypeError: Failed to fetch".

There must be a simple way to make this work?
I just cannot figure it out for the life of me.

[DimitrisPok]

When accessing resources like data.txt from a JavaScript file hosted in a private repository, you'll encounter a CORS (Cross-Origin Resource Sharing) error due to security restrictions.

To resolve this, you would need to set up CORS headers on your server to allow cross-origin requests. But, since you're trying to fetch data from a private GitHub repository, you can't directly access it from client-side due to some security restrictions. But I think you could proxy the request through a server that you control. You can find the source code for that online. Also make sure your GitHub token has all the necessary permissions to access the repository, that's something people sometimes overlook.

Hope this helps in some way.

[ultraJorge]

Now, this might be a dumb question, but why is it cross origin if both the index.html with the JavaScript inside as well as the data.txt are in the same directory of the private repo?

I helped myself by creating a public repo which only holds the test data, so at least that now works for test purposes.

Still wondering how to use a personal access token to preview the website, though. I believe I have given the token the necessary permissions (though of course I don't know how I could be sure), and that perhaps the problem lies with the raw.githubusercontent.com url which might not work with any tokens other than the ones generated when clicking 'raw'; but I just could not find any combination with any url so that it would work with a personal access token.

[DimitrisPok]

Hi again, well, web browsers enforce strict security policies to prevent scripts from accessing resources across different origins.

Even if the files are in the same directory within the GitHub repository, accessing a file like data.txt using client-side JavaScript directly from a different origin will still trigger a cross-origin request and be blocked by the browser.

As for using a personal access token to preview the website, it's unlikely that directly embedding the token in the URL like with the raw.githubusercontent.com URL will work. Personal access tokens are typically used for authentication and authorization purposes when making API requests to GitHub, not for accessing content directly through a web browser. For example I have used a script before to access github copilot programatically, the token was used as I had to log in to my github account through the terminal to use copilot.

Here is an example of what you could do instead using Node:
`// server.js
const express = require('express');
const fetch = require('node-fetch');
const app = express();

const GITHUB_TOKEN = 'YOUR_GITHUB_TOKEN';
const REPO_OWNER = 'YOUR_GITHUB_USERNAME';
const REPO_NAME = 'YOUR_REPO_NAME';

app.get('/data', async (req, res) => {
try {
const response = await fetch(https://raw.githubusercontent.com/${REPO_OWNER}/${REPO_NAME}/main/data.txt, {
headers: {
Authorization: token ${GITHUB_TOKEN}
}
});
const data = await response.text();
res.send(data);
} catch (error) {
console.error('Error fetching data:', error);
res.status(500).send('Internal Server Error');
}
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(Server listening on port ${PORT});
});
And on your client side:// index.html
fetch('/data')
.then(response => response.text())
.then(data => {
// Process data here
})
.catch(error => {
console.error('Error fetching data:', error);
});
`
Please keep in mind that the source code parts I provided were just me doing a quick search on ChatGPT to get a quick template on how your code could work. Take it as an influence.

Again, let me know if something isn't clear.