Handling CORS in Backend Workflows

chris.e.daly · 2024-08-23T16:20:51.757Z

We have a script that resides on e-commerce sites that passes a JSON payload to a backend workflow where it is processed and returns a response. We need to address the CORS issue by adding headers to the backend workflow (essentially a database function). The headers are:

{
“Access-Control-Allow-Origin”: “*”,
“Access-Control-Allow-Methods”: “GET, POST, PUT, DELETE, OPTIONS”,
“Access-Control-Allow-Headers”: “Content-Type, Authorization”
}

I am at a loss on how that might be handled in the API Workflow. Any thoughts?

Jici · 2024-08-23T16:25:14.028Z

Can you explain more what you are doing? Where/when do you see CORS issue?

chris.e.daly · 2024-08-23T16:47:49.466Z

Our app allows a user to add items to a cart and then submit an offer to buy the cart before checking out. (see the screenshot). On submit, the JSON payload from the offer is sent to an api endpoint backend workflow here in Bubble, we parse the JSON and process the offer and apply some rules the seller sets and send back a response.

Before the offer processes, bubble is indicating a CORS issue and throwing the 400 error. We could literally send offers from 1000 domains all at once so we need to solve that with the headers. We can do it in javascript but not sure how that script would work with workflow OR if we send the payload to an edge function and then route it to the backend workflow.

Screen Shot 2024-08-23 at 12.43.21 PM1920×2206 308 KB

Baloshi69 · 2024-08-23T17:06:50.125Z

If you can do it with JavaScript. You need toolbox plugin.

Then There are two ways

Run a workflow from a script , for it you need to add a Java2bubble element on page and it give its a suffice.

In side you JavaScript you call that suffix it will will trigger a workflow and in side that workflow yoh can do a lot.

And if you want a workflow to run a JavaScript simple add a script action inside a workflow.

Dont know much about COAS, but can gelp you run custom scripts in bubble.

If i miss something ping me, love to help. Will get in a call and help you add a JavaScript.

chris.e.daly · 2024-08-23T17:28:11.590Z

We were thinking of using Supabase for this project because we can deploy an edge function that handles CORS and sends th request to the db function. Supabase JWT tokens became a nightmare to try and solve. This is the snippet for CORS

  if (req.method === 'OPTIONS') {
    return new Response(null, {
      status: 204,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "POST, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Authorization",
      },
    });
  }
type or paste code here

The trick is putting this here. I will give the toolbox a look - it’s already installed.

Jici · 2024-08-23T19:28:35.539Z

Why don’t you use API Connector to send your JSON request to your backend WF?

You cannot change CORS settings from Bubble server. But technically, you should first check your request. 400 error (even if you get a CORS error return) it’s mostly related to request first. We don’t see the full JSON you are sending so it’s hard to know if the JSON payload is fine.

chris.e.daly · 2024-08-26T00:05:38.497Z

We are calling the api workflow from Shopify and it receives the JSON file, maps it and then we run a process on the data and then use the API Connector to POST back into Shopify with the results.

We have done this for over a year, likely just a change to our json file might be causing the CORS issue and we can likely address that with the toolbox and adding the CORS headers into the API workflow first and then to the rest of the workflow. Will give that a shot tomorrow and see how it rolls.

chris.e.daly · 2024-08-26T00:07:05.267Z

We are running a backend api workflow and sending the JSON data to it. We updated the JSON payload and that might be part of our issue. Will check on Monday to see if that is the problem.

Jici · 2024-08-26T00:09:43.899Z

Like I said in my previous post, the JSON sent is the first thing to check according to the 400 error.