Forum Discussion
Posting to a REST API from a Custom Visual using TypeScript
Hi,
I've read that you can create custom visuals with a button that will POST to a rest API. I want to use this to update our database via a REST API from our Power BI Report in our Embedded workspace.
I've used the below TypeScript code, but each time I click the button, I get a "TypeError: Failed to Fetch" message.
I can't use PowerApps to do this, as our customers use the Report and so they do not all have the logins needed for Power Apps authentication (even when using a Per App Licence).
Any help would be much appreciated.
Lee.
private onButtonClick(): void {
// Prepare the payload; include values extracted from the model
const payload = {
Value: "98"
};
const json = JSON.stringify(payload)
this.button.innerText = json
const apiUrl = "http://localhost:5000/log/";
fetch(apiUrl, {
method: "POST"
,
headers: {
"Content-Type": "application/json"
}
,
body: json
})
.then(response => {
if (!response.ok) {
this.button.innerText = `API call failed: ${response.statusText}`;
}
return response.json();
})
.then(data => {
this.button.innerText = data;
})
.catch(error => {
this.button.innerText = error;
});
Hi,
Thanks for the advice/help. I did have most of that in place, but not all of it.
I do now have it working, and the two main things causing the issues were not using HTTPS and also not realising you have to amend the "Capabilites.json" file to include your REST API URL in the privileges section, as shown below.
"privileges": [
{
"name": "WebAccess",
"essential": true,
"parameters": [
"https://leetest.free.beeceptor.com",
]
}
]
2 Replies
Hi,
Thanks for the advice/help. I did have most of that in place, but not all of it.
I do now have it working, and the two main things causing the issues were not using HTTPS and also not realising you have to amend the "Capabilites.json" file to include your REST API URL in the privileges section, as shown below.
"privileges": [
{
"name": "WebAccess",
"essential": true,
"parameters": [
"https://leetest.free.beeceptor.com",
]
}
]Hi LPAN012345 ,
Based on your description and codes, this error is commonly related to a cross-origin issue (or similar network problems) when running your fetch() call from within a Power BI custom visual. Could you please check the following info?
- When your custom visual (running within Power BI or an embedded report) makes a request to your REST API (http://localhost:5000 in your example), the browser enforces cross-origin restrictions. Please verify that your API is configured to allow requests from the domain hosting your Power BI report. For local development you may need to temporarily allow all origins (e.g., using the CORS middleware in your API) or whitelist the necessary domains. If you’re using an Express server in Node.js, you can add: or configure it with specific origins.
const cors = require('cors');
app.use(cors());
- Update the URL to https://localhost:5000/log/ (ensure your local server supports HTTPS)
-
Modify your
fetchcall to include CORS parametersfetch(apiUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: json,
mode: "cors", // Explicitly enable CORS
credentials: "omit" // Adjust based on your auth requirements
})
Best Regards
- When your custom visual (running within Power BI or an embedded report) makes a request to your REST API (http://localhost:5000 in your example), the browser enforces cross-origin restrictions. Please verify that your API is configured to allow requests from the domain hosting your Power BI report. For local development you may need to temporarily allow all origins (e.g., using the CORS middleware in your API) or whitelist the necessary domains. If you’re using an Express server in Node.js, you can add: or configure it with specific origins.
