CORs policy error using Thumbnail API

[popsterrs (popsters)]

So I am using the Roblox Thumbnail API to get the image addresses of an array of imageIds in js. The result is working in the terminal and postman fine, but when I try to use javascript’s fetch function im encountering a CORS policy error which means nothing is returned and I cannot access the imageUrl

function GetImageURLs(imageIds) {
    const ids = imageIds.join(',')

    fetch(`http://thumbnails.roblox.com/v1/assets?assetIds=${ids}&returnPolicy=PlaceHolder&size=512x512&format=Png&isCircular=false`)
    .then(result => {
        console.log(result.json());
        return result.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('An error occurred:', error);
    });
}

If anyone has come across this error and/or found a solution then help would graciously be appreciated.

[hihi250 (unpro)]

There’s nothing you can do about this purely with client-side Javascript. CORS policies are enacted by browsers to stop cross-site-scripting attacks. This way, sites can’t just access any website’s resources.

I don’t know why, but Roblox has not configured a CORS policy (by using the Access-Control-Allow-Origin header). Usually public Rest APIs allow all domains to access their resources. Because of this, your requests will get blocked by the browser. I’m not sure if this is meant to happen, but it would be nice of Roblox to fix it.

Either way, to fix the problem you can do any of the following:

• Fetch/process the data on your server instead of in the browser
• Create a proxy that forwards the data from roblox.com to your domain and allow cross-origin requests
• Use a public proxy like roproxy.com which allows cross-origin requests

If you’re not expecting a large amount of traffic, I’d recommend using roproxy.com to avoid additional requests to your server. An example of your script using a proxy:

function GetImageURLs(imageIds) {
    const ids = imageIds.join(',')

    fetch(`http://thumbnails.roproxy.com/v1/assets?assetIds=${ids}&returnPolicy=PlaceHolder&size=512x512&format=Png&isCircular=false`)
    .then(result => {
        console.log(result.json());
        return result.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('An error occurred:', error);
    });
}