HTML Need Help with CORS Access Error

[Fawzix55]

Just a small background on what is happening... This is my first project, which is basically a Celebrity Economy Game but with DeepFake sex gifs, etc. Instead of using something like Twine or Renpy, I decided to use my good knowledge in HTML, CSS, & JavaScript to perform this project. As I wanted to make it modular and easy to expand.

I have been testing everything through the "Live Servers" plugin in VSCode.

I am done with initial game with all its systems and as mentioned above, everything is working through VSCode, but after finishing the game I tried launching it through the "Index.html" File and now most media are broken due to CORS Accessibility.

I have Looked everywhere to try to solve this issue, but to no aid.

If anyone know of how i might fix this, please let me know, attached is a screenshot of the error in case it helps.

 

[Fawzix55]

I understand the Issue and what it means, but i am looking for a work around before releasing the game, i don't want to make users have to use VSCode or Start their own localhost Servers using Python xD

 

[Greeedium]

Is this an Image on your computer you have locally or something you are getting by an API request?

The code that is causing the error would also be a welcome addition to the post.

 

[Fawzix55]

Is this an Image on your computer you have locally or something you are getting by an API request?

The code that is causing the error would also be a welcome addition to the post.

I am aware that the CORS policy requires the files to be hosted online and not reference directory hence it working through VSCode "Live Server" as it hosts the files locally to

You must be registered to see the links

, so the gifs show fine.


I cant upload code files, so here is a GDrive Link with the code:

You must be registered to see the links

I didn't upload the media as its almost 4 GB xD

 

[Greeedium]

I am aware that the CORS policy requires the files to be hosted online and not reference directory hence it working through VSCode "Live Server" as it hosts the files locally to

You must be registered to see the links

, so the gifs show fine.

What do you mean Hosted online?

You can access files by using a relative path.
<img src="./home.png"> will show the image in the same folder as the .HTML file called "home.png" no matter if its in the live server or if you open the .html file.



If you are trying to Request them via a HTTP / API request you will need to enable CORS for that domain.

 

[Greeedium]

Also, this is my personal opinion, but if you already know HTML, CSS & JavaScript, I would highly recommend you give Sugarcube (Twine) a try, as it is really user friendly, doesn't have that big of a learning curve and will let you work more on the Game itself then.

If you don't like the Editor try it with Tweego (A CLI) which will build the game for you out of lose .tw/.twee files. using it you can easily get it running in VSC with the T3LT extension.

In Twine (SugarCube 2) You can put normal HTML/CSS elements into the Script directly which will result in the Passage being layouted by your preference, and the JavaScript will also get bundled along with the Story, so anything that you can do with the "basic" Macros/Widgets, can be done in JavaScript.

 

[Fawzix55]

Thank you for trying out, but I think you'd require the full asset Structure to replicate the issue, i have attached both For your reference of how it should be and how its coming out through the index only.

 

[Fawzix55]

As for using Twine , i have tried it before , but it seemed limited to the functionality and the customization i am seeking to be honest.

 

[Greeedium]

Thank you for trying out, but I think you'd require the full asset Structure to replicate the issue, i have attached both For your reference of how it should be and how its coming out through the index only.

Ah I see now, I didn't originally check your code.

You are using fetch() to check if the image exists, but that is impossible on .HTML since CORS won't allow it as its a security issue. You would really need to host your game in a LocalHost, with either a Python script or Liveserver.

But you can make a new Image with JS instead, add the Src and check if the image loads, which will lead to a loads of errors.

const loadImg = function(img, url) {
  return new Promise((resolve, reject) => {
    img.src = url;
    img.onload = () => resolve(img);
    img.onerror = () => reject(img);
  });
};

let imageArray = []
let testImage = new Image()
let testImageSrc = ""

for (let i = 0; i < 20; i++) {
    testImageSrc = `./assets/celebs/media/Ana de Armas/HJ ${i}.gif`
    console.log("testing: "+ testImageSrc)
    await loadImg(testImage, testImageSrc).then((img) => imageArray.push(img.src)).catch(() => console.warn("img "+i+" failed to load"));
}

 

[Greeedium]

As for using Twine , i have tried it before , but it seemed limited to the functionality and the customization I am seeking to be honest.

Everything I can see as of now in your code can be also done 1 to 1 in SugarCube-2.

Hell, most of it can probably done way faster in SugarCube, as it already has a lot of features, like the Settings API and Saves or Game restarts.

And everything custom can just be added as Javascript and then executed.

I mean even Degrees of Lewditys has a whole custom shopping system where you can buy every piece of clothing with any RGB colour from a colour picker.

Anyway, I'm not here to sell you Sugarcube, but a lot is possible with it!
hope you're having a great day!

 

[melantha]

if you want to package a web/browser application into a "desktop" game, check

You must be registered to see the links

. you can distribute your game that way without web servers or CORS errors

 

[Fawzix55]

Ah I see now, I didn't originally check your code.

You are using fetch() to check if the image exists, but that is impossible on .HTML since CORS won't allow it as its a security issue. You would really need to host your game in a LocalHost, with either a Python script or Liveserver.

But you can make a new Image with JS instead, add the Src and check if the image loads, which will lead to a loads of errors.

const loadImg = function(img, url) {
  return new Promise((resolve, reject) => {
    img.src = url;
    img.onload = () => resolve(img);
    img.onerror = () => reject(img);
  });
};

let imageArray = []
let testImage = new Image()
let testImageSrc = ""

for (let i = 0; i < 20; i++) {
    testImageSrc = `./assets/celebs/media/Ana de Armas/HJ ${i}.gif`
    console.log("testing: "+ testImageSrc)
    await loadImg(testImage, testImageSrc).then((img) => imageArray.push(img.src)).catch(() => console.warn("img "+i+" failed to load"));
}

View attachment 4170883

View attachment 4170884

thank you so much for the help will double check it ,and see if it works

 

[Fawzix55]

Everything I can see as of now in your code can be also done 1 to 1 in SugarCube-2.

Hell, most of it can probably done way faster in SugarCube, as it already has a lot of features, like the Settings API and Saves or Game restarts.

And everything custom can just be added as Javascript and then executed.

I mean even Degrees of Lewditys has a whole custom shopping system where you can buy every piece of clothing with any RGB colour from a colour picker.

Anyway, I'm not here to sell you Sugarcube, but a lot is possible with it!
hope you're having a great day!

but performing these custom things would require very good knowledge of Twee Code, which I am not ready to deal with at the moment to be honest xD

 

[Fawzix55]

if you want to package a web/browser application into a "desktop" game, check

You must be registered to see the links

. you can distribute your game that way without web servers or CORS errors

Looks Interesting, I will give it a look, thank you for the Input

 

[Feyschek]

but performing these custom things would require very good knowledge of Twee Code, which I am not ready to deal with at the moment to be honest xD

I don't want to argue, but the man is right.
Using the example of my study project, which one I work on in my free time.

Spoiler

You don't have permission to view the spoiler content. Log in or register now.

P.S
For reference, what is shown in the screenshots is not all, the elements have many types of animation.

Everything that we see I did on the basic SugarCube-2.
And the idea of my educational project is to create something interesting on this engine + using a 3d studio.

Because I've played many games on this site and the engine is very often ignored when creating a game using a 3d studio.
But after suffering for 2 days, I was able to create those things that everyone loves Ren'Py.

Therefore, it is better not to suffer in creating a wheel and take a ready-made easy-to-use engine and start creating a game.
You will still have to understand the logic of the engine and write the code, but this is not the kind of torment that you are going through right now.

But if you decide to go this way, then this is your choice and I wish you good luck

 

[Fawzix55]

I don't want to argue, but the man is right.
Using the example of my study project, which one I work on in my free time.

Spoiler

You don't have permission to view the spoiler content. Log in or register now.

P.S
For reference, what is shown in the screenshots is not all, the elements have many types of animation.

Everything that we see I did on the basic SugarCube-2.
And the idea of my educational project is to create something interesting on this engine + using a 3d studio.

Because I've played many games on this site and the engine is very often ignored when creating a game using a 3d studio.
But after suffering for 2 days, I was able to create those things that everyone loves Ren'Py.

Therefore, it is better not to suffer in creating a wheel and take a ready-made easy-to-use engine and start creating a game.
You will still have to understand the logic of the engine and write the code, but this is not the kind of torment that you are going through right now.

But if you decide to go this way, then this is your choice and I wish you good luck

I love programming and all its challenges it presents and I am doing it this way to practice,learn, & improve in JavaScript, I just feel more comfortable working that way, I will not just learn Twee to create 1 project, unlike Js , which it can be used for many different types of projects. I am pretty sure Twine & Ren'Py can achieve the complex results which one desires, just doesn't make sense to me personally as I will not be making a living from porn games, again that is just personally, i am doing this for fun.

 

[Mike145]

That's a really shallow way of thinking. At some point you realize that learing a specific programming language doesn't really matter. If you're a good software engineer you're gonna learn any framework/language pretty fast. Some things obviously slower like if you come from only writing python and suddenly you want to work with C++. The only barriers are concepts and patterns you have to learn. Before I got my first job I've just applied to any language/framework job I was interested in. Eventually I got a job with a framework that I started using a week before the interview.

If your goal is to get a job then don't make this project at all. There're multiple way better but less fun ways to achieve that goal. Like make a project that you can actually show off in your CV and then talk about during the interview.

But If your goal is to make a game choose a suitable tool for the job, that's what a professional SE does.

I just want you to know that your time spent developing a game using a different language and a different framework that you want to apply for the jobs is not wasted. It's gonna make you a better developer overall.
You're gonna do what you want obv but that's my opinion.

 

[Fawzix55]

That's a really shallow way of thinking. At some point you realize that learing a specific programming language doesn't really matter. If you're a good software engineer you're gonna learn any framework/language pretty fast. Some things obviously slower like if you come from only writing python and suddenly you want to work with C++. The only barriers are concepts and patterns you have to learn. Before I got my first job I've just applied to any language/framework job I was interested in. Eventually I got a job with a framework that I started using a week before the interview.

If your goal is to get a job then don't make this project at all. There're multiple way better but less fun ways to achieve that goal. Like make a project that you can actually show off in your CV and then talk about during the interview.

But If your goal is to make a game choose a suitable tool for the job, that's what a professional SE does.

I just want you to know that your time spent developing a game using a different language and a different framework that you want to apply for the jobs is not wasted. It's gonna make you a better developer overall.
You're gonna do what you want obv but that's my opinion.

Hey mike , appreciate your time in writing the message,

In simple terms no, i am not doing this to learn to find jobs, I am a full time Accountant & Finance Officer for holding company that has 20+ companies in which our team of 6 ppl oversee, some companies report to us and some others we personally do the day to day work.

In long Terms, I do Programming as a hobby, i have self studied it because I enjoy it, as an example my first programming language I learned in 2015 was Java, in 2021 I was proficient with Python and now I use it almost every day in my work to automate tasks, so whatever you are saying is 100% correct, if I see a C++ or a Js code I might understand what the code is doing in general as I now know some coding.

For Js, I have tried every now and then to learn it, but for many reasons I stop, so that is why I say that "I have some knowledge in it" as I covered a lot of the basics before, I just want to explore it more and see where its limits are and what its capacble and if i can use it to make my life easier in anyway.

Creating a fun project like this game would help me achieve that rather than using Twee, and I know what ppl might say after reading this .... "Ren'Py is basically Python, why not use it" again that defeats the purpose of me learning more Js & CSS.

 

[Mike145]

Hey mike , appreciate your time in writing the message,

In simple terms no, i am not doing this to learn to find jobs, I am a full time Accountant & Finance Officer for holding company that has 20+ companies in which our team of 6 ppl oversee, some companies report to us and some others we personally do the day to day work.

In long Terms, I do Programming as a hobby, i have self studied it because I enjoy it, as an example my first programming language I learned in 2015 was Java, in 2021 I was proficient with Python and now I use it almost every day in my work to automate tasks, so whatever you are saying is 100% correct, if I see a C++ or a Js code I might understand what the code is doing in general as I now know some coding.

For Js, I have tried every now and then to learn it, but for many reasons I stop, so that is why I say that "I have some knowledge in it" as I covered a lot of the basics before, I just want to explore it more and see where its limits are and what its capacble and if i can use it to make my life easier in anyway.

Creating a fun project like this game would help me achieve that rather than using Twee, and I know what ppl might say after reading this .... "Ren'Py is basically Python, why not use it" again that defeats the purpose of me learning more Js & CSS.

I mean, if you know the drawbacks of that approach and you do it for fun then just continue.

My bad cause I got the image of you compltelty wrong. When I read " I will not just learn Twee to create 1 project, unlike Js , which it can be used for many different types of projects. " and "as I will not be making a living from porn games" I assumed you're a wannabe SE.

Personally I think that if you're already quite proficient in python then javascript won't give you new ways to make your life easier. The only thing I can think of right now is to make your own portfolio website if you don't have one right now. Pretty sure it's gonna be rare in accounting. If you want to impress HR and employers check out three.js.

 

[melantha]

That's a really shallow way of thinking. At some point you realize that learing a specific programming language doesn't really matter.

i woudn't call it shallow, just having a different perspective.

he doesn't want focus on a specific framework because he wants a broader scope.
with js, you can do web, desktop games, mobile apps, or anything really.
since it's a hobby, having a language that can do alot of stuff, it lets you make things even on a whim regardless of that it is.

if he focuses on every framework that fits his projects, he will need to re-learn the environment, potentially install new executables and dependencies, taking more time. he can't just jump in and experiment with concepts within 10 minutes.