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:
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.
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.
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.
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.
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.