Forum Discussion

LPAN012345's avatar
LPAN012345
Frequent Visitor
1 year ago
Solved

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 wor...
Need Help
  • LPAN012345's avatar
    LPAN012345
    1 year ago

    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",
    ]
    }
    ]


Anonymous's avatar
Anonymous
Not applicable
1 year ago

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 fetch call to include CORS parameters

    fetch(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