Fetch API CORS problem

Options

How do we get around a CORS issue when building a custom widget? Is there a duda proxy? I am trying to build a test by using a dog facts api but I am running into a problem with CORS. It says

"Access to fetch at 'https://dog-facts-api.herokuapp.com/api/v1/resources/dogs?number=1' from origin 'https://my.duda.co' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

However, disabling CORS can cause other issues. What if I run into this problem with other api requests? what is the best way to get around this in the custom widgets?

Answers

  • Elizabeth_Fedak
    Elizabeth_Fedak Member Posts: 106 MVP
    Options

    I deploy my code via a GCP cloud function to be able to set the proper headers when there are CORS requirements so it handles preflight requests etc and I just make a call to my custom function with any relevant data.

  • william
    william Member Posts: 2
    Options

    What are the CORS requirements you use to handle requests that come in during widget development? And do you have any additional security when sending requests from the browser?

    These all use the host https://my.duda.co. If this is allowed, ANY person developing a widget can access your API and perform any exposed action, so right now, I'm only allowing that to be accessed when sending a request to my localhost (development). Once the code is deployed https://my.duda.co is not allowed.

    This doesn't solve a major security issue though. Extensions in a browser, the browser console, or ANY resource that can send a request with an "Origin" header set to an accepted origin can make requests to the API using your credentials. This is highly insecure, so I'm only allowing access to specified end points in the Duda API from my backend. That at least limits any potential concern of deleting sites, etc.