I am having a problem with fetching profile data from Trovo API.
Access to fetch at 'https://open-api.trovo.live/openplatform/channels/id' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.
In the documentation of the API says:
If you are making API calls from the client side, you may come across CORS issues. Your domain needs to be whitelisted in Trovo in order to do CORS calls.
In addition, please add origin in the header when you are making cross-site calls.
I am getting this error on production too, where I am using my registered domain.
const fetchProfile = async () => {
const ress = await fetch(
"https://open-api.trovo.live/openplatform/channels/id",
{
method: "POST",
headers: {
Accept: "application/json",
"Client-ID": `${process.env.TROVO_CLIENT_ID}`,
"Content-Type": "application/x-www-form-urlencoded",
},
body: '{"username":"test"}',
}
).then((res) => res.json());
You can make a proxy call.
On client side u can call :3000/trovo or something like this
And on server side make the call to the server
cli -> server -> trovo -> server -> cli
u encumber load on server, but u avoid cors
Your browser is stopping your local site calling any resource not on the same domain. In your package.json add the line:
proxy: "https://open-api.trovo.live";
and change your fetch call to be:
const ress = await fetch(
"/openplatform/channels/id", ...
However, this will only work in dev and still may not work. I have not used Trovo so can't say exactly but in Sanity I have to go into the project settings and add all my domains in the CORS/Whitelist section which is what this is saying:
If you are making API calls from the client side, you may come across CORS issues. Your domain needs to be whitelisted in Trovo in order to do CORS calls.