I’m trying to use the endpoint: https://preview.threekit.com/api/fast-compositor/
I’ve attempted requests from 3 different locations:
- on the documentation page itself with both a public and private access token
- through a REST client (VS Code ext) with both a public and private access token
- using a fetch from the browser with a public access token (this is ultimately our use case)
- On the documentation page, I receive a 403 no matter if I use the Authorization header, or the
bearer_tokenquery string parameter. - Through the REST client, I receive only a 400 Bad Request, which is interesting because the endpoint only claims to have 2 required query string parameters:
assetIdandorgId. I have tried the call with and without the orgId since there is an explanation in the REST doc page about theorgIdno longer being necessary for calls since the tokens are created in the orgs. No matter how large or small I build the request (adding/removing optional query string params), I still receive a 400 Bad Request. - Using fetch on the browser, I only receive 403 Forbidden as a response status. It being a request from the browser, I am utilizing the
bearer_tokenquery string parameter, which the documentation claims to allow the use of a public token to access the API. Yes, I have the domain accessing the endpoint in the allowed list for the token. It’s the same token used with our player and that works seamlessly.
No matter how I attempt to create the request, I don’t seem to be able to access the endpoint in a way the documentation says I should be able to.
Here is some example code:
const getCompositeImage = async (config) => {
let params = new URLSearchParams();
params.append('bearer_token', process.env.REACT_APP_THREEKIT_PUBLIC_TOKEN);
params.append('assetId', '0c54543b-6865-4453-bf79-7d358fd79709');
params.append('orgId', process.env.REACT_APP_THREEKIT_ORG_ID);
params.append('configuration', JSON.stringify(config));
params.append('width', '1920');
params.append('height', '1080');
params.append('cropWidth', '1');
params.append('cropHeight', '1');
params.append('format', 'png');
params.append('imageFitMode', 'cover');
const req = new Request(`https://preview.threekit.com/api/fast-compositor/?${params.toString()}`, {
method: 'GET',
headers: {
// Authorization: `Bearer ${process.env.REACT_APP_THREEKIT_PUBLIC_TOKEN}`,
Accept: 'image'
}
});
console.log('getCompositeImage URL:', req.url);
try {
const result = await fetch(req);
if (!result.ok) {
const errorData = await result.json();
console.error('Error response:', errorData);
throw new Error(`Request failed with status: ${result.status}`);
}
return await result.blob();
} catch (error) {
console.error('Error:', error);
return error;
}
}
Please explain what errors I am making in accessing this endpoint. Thank you in advance! 