CORS error in Add/Update custom code api

Design help Data API
1 
   const response = await fetch(
      `https://api.webflow.com/v2/pages/${currentPageID.id}/custom_code`,
      {
        method: "PUT",
        headers: {
          Authorization:
            "MY_AUTH",
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          scripts: [
            {
              id: "css_slider",
              location: "header",
              version: "1.0.0",
            },
          ],
        }),
      }
    );

This is a designer extension application, in this i am using the Add/Update custom code API to add a script to the head tag, but am facing this issue:

image
image498×136 6.49 KB

image
image478×135 6.19 KB

I get the same CORS error on local host as well as deployed version

2

Has your issue been resolved?

3

Hi @Aayushman_Pratap - it looks like you may be trying to call one of the Custom Code Data APIs from your Designer Extension/localhost.

You’ll need to make this call behind a backend/server, as you cannot make Webflow Data API calls from a Designer Extension, where when used by end users, the code will be exposed (and thus, the access token in your Authorization header). If you want to serve your backend on localhost for development, you can use a tool like ngrok for tunneling through a https-based URL.

If you’re building a Designer Extension Webflow App and want to make Data API calls, I recommend converting it to a Hybrid App (which has both a Designer Extension/Data Client) which will allow you to make Data API calls but in a more secure manner. Check out this hybrid app example project which shows a sample workflow of how this setup works.