Hello,
I’m trying to load images generated using the openAI API but I’m getting the error message described below. I just want to load the image/texture so I can temporarily use it in my Playcanvas application. Creating the images works fine - but i cant load them.
Does anyone know how to deal with this - it seems to be a problem with cross-domain requests. Maybe there is a workaround for this.
1953675:1 Access to XMLHttpRequest at ‘[link to image]’ from origin ‘https://launch.playcanvas.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
CORS: Cross Origin Resource Sharing - the image sits on a domain where the server is not configured to let the domain playcanvas.com (and most likely any ‘alien’ domain) fetch the resource. You can of couse see the image in a browser at the url with its regular domain [e.g. openai.com], you just can’t fetch the image via HTTP onto another domain (or likely even localhost). If you had control of the server, you could allow access from other domains. This is a fairly typical scenario: lock everyone out, and whitelist who can access.
Given that the resource is an image you can presumably view in a browser, there’s nothing technical (apart from copyright restrictions that may apply) stopping you from saving the image to your local disk, then uploading to host it on your own server (and enabling CORS access from playcanvas.com there).
Unless you are looking to dynamically generate images and immediately present these as textures, making the download/upload step unsuitable? In such a case, I’d expect maybe there’s some kind of paid API tier and auth token system to let you generate images and link these in your own apps - in such a case, you are asking the third party to host your content and provide bandwidth for the resource, so only it makes sense this’d cost something.
1 Like
Hi @inductible,
thanks for the clarification! So in this case i found: “https://cors-anywhere.herokuapp.com/” to bypass the cors policy - but i think this woulnt be a long-term solution, because this will be a project for a customer.
So if i get it right - its basically a “fetch” problem - getting / referencing the image straight from the other domain and using it is a problem. If this problem could be solved by downloading the image and storing it locally or on a custom server this problem should be solved too i guess.
Currently im figuring out whats the best method to create ai images and use them inside my app. Never had Cors policy problems before - most of the time sources are stored on my / our own (cloud)server.
Many thanks to your explanation!