Skip to main content

I’m trying to emulate the request to get all widgets from the “List All Widgets - Try It” page locally. I have an index.js file that is linked in a html file. All the index.js contains is:

 

const options = {
  method: 'GET',
  headers: {
    Accept: 'application/json',
    Authorization: 'Bearer <access token>'
  }
};

fetch('https://api.miro.com/v1/boards/<board id>%3D/widgets/?widgetType=sticker', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

But whenever I make the request all I get is TypeError: Failed to fetch

What am I doing wrong here? Is the endpoint incorrect? Am I supposed to be adding additional fields to the options?

 

I tried making a request through Postman using that endpoint and the access token that was provided when the app was made and the request works. I just don’t get what’s wrong with this fetch request :(

After investigating more this is an error I’m getting: 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.miro.com/v1/boards/uXjVOY9bUIY%3D/widgets/?widgetType=sticker. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 401.

What is the supposed to be the associated value with the Access-Control-Allow-Origin key in headers?

Hey Jay!

 

Long story short, when you’re calling fetch from an HTML file, you’re calling it from a frontend app, which is subject to cross origin blocking, for security reasons! 

You can try a few different solutions to “work around” this, but over all if you’re using the REST API, would suggest calling it from a server, instead of a front end application. 

 

That being said, here’s a few solutions you can try and use: https://medium.com/swlh/avoiding-cors-errors-on-localhost-in-2020-5a656ed8cefa

Here’s also another good article for understanding what’s happening: https://www.contentstack.com/docs/developers/how-to-guides/understanding-and-resolving-cors-error/#:~:text=CORS%20Issue%20in%20Frontend%20Frameworks&text=allow%20users%20to%20replicate%20the,proxy%2Dmiddleware%20to%20proxy%20requests.

Hey Addison,

Yeah I ended up using a server to make calls to the REST API after reading this post https://community.miro.com/developer-platform-and-apis-57/cors-error-when-accessing-miro-api-from-web-plugin-3256

 

 

Glad you got it working!

Reply


Terms & Conditions