API request with different Content-Type for header and request body

Dear API experts,

For my Bubble app, I need to use dynamic parameters in the json query of an API which only responds to a specific configuration of form-data (the API apparently uses an ElasticSearch DB, given the look of the queries suggested in the doc).

In Postman, I was able to make the following request work:

As you can see, “Content-Type” header is set to “multipart/form-data” and "body is set to “form-data” as well:

This is where it gets tricky (in my novice opinion): I then add my json string ElasticSearch query in the “query” form-data entry (I need to filter results with this query), and the only way to get a valid API response is to also set the “Content-Type” as “application/json” in the same entry (even though the header itself is set to form-data…). If I leave the query’s Content-Type field empty, the API doesn’t use my ElasticSearch query string at all and responds with an unfiltered list of results.

Now, I need to do reproduce the working Postman config in the Bubble API Connector, and I can’t find any way to make this work.

Here is how I got my API set up in Bubble:

Unfortunately, the API respond with a 500 and I suspect this is because I was unable to specific “application/json” in the Content-Type of the “query” field. But I do not see any way to achieve this in the API Connector.

I tried many different combinations, tried to use the ElasticSearch query string in a json body, body type…etc but nothing seems to work (the API either responds with an error or with unfiltered results).

The API I’m using is poorly documented (doc only shows Postman configs), and I reached out to the devs to no avail.

Can someone help me?
Many many thanks :pray:

1 Like

Link to documentation endpoint?

Sorry, should have included it in the original post.
Here it is: Funding & tenders

The API I’m trying to use is: https://api.tech.ec.europa.eu/search-api/prod/rest/search?apiKey=SEDIA&text=***

I don’t think you need to change the content-type. The API Doc doesn’t talk about using JSON as content-type. They use form-data or querystring. They receive the json like a string in a parameter. What I guess that may happen is that Bubble may encode the request.
Did you tried raw encoding instead? What Is the error if you use form-data?
Try to post the request to requestbin.com and debug the data received.

Thank you so much for taking the time to look at this!

When not using json as content-type (at the body/query level)), here is the error I get when submitting through Postman:

“Content-Type ‘application/octet-stream’ is not supported”

What hinted me to add “application/json” is a particular screenshot in the doc where they specifically highlighted the “Content-Type” field and set it to “application/json” in the request body table (the link to this screenshot appears to be broken on the doc page unfortunately, but trust me it was there :slight_smile: ):

So I’m guessing that the Content-Type really has to be set to json in the body, since it was highlighted in the doc and that the API throws an error when configuring requests differently… :frowning:

I tried various raw requests but I really don’t know how to format these. I analyzed the form-data query the F&T portal is itself using via the Chrome dev tools:

I tried to reproduce this and here are the ones I tried but I’m not even sure they were formatted correctly as per raw encoding standards… Here is what I get when trying this route:

The request goes through, but the response is not helpful: it sends unfiltered results back to me, meaning the ElasticSearch query string was not taken into account.
I get the same behavior in Bubble with this particular config.

I posted the request to a RequestBin workflow but I’m not sure what to do next to analyze the response?

Found the screenshot in the doc :slightly_smiling_face:

Leave it to the EU to make someone do a POST request when they are GETting data, and to shove an entire minified JSON body into the URL as query string :rofl:

Exactly what I’m thinking… Losing all my hair over this one :sob: :sweat_smile:

What’s not working? Make the API call from Postman to https://webhook.site/ like they picture

Then do the same exact request from Bubble to https://webhook.site/ and see the difference

Or RequestBin instead of Webhook.site

And also verify what you are sending from Postman to the actual API is returning what you want so you know the request is good.

What’s not working is that I can’t get the API to respond with filtered results when making the request from Bubble: all the configs I tried either get me an error or unfiltered results.
Via Postman, I’m able to get a proper filtered response from the API with the config I showed in my first post (query string in the form-data field, with Content-Type set to json in the same row).

I will try comparing Bubble and Postman with the tools you mentioned and report back. Thank you so much!

I have to add that I was indeed able to make the request work from Bubble, the problem is that I have to use a query.json file instead of a string request in the form-data:

With this config, the request returns proper filtered results from the API, but then I lose all ability to make the query dynamic since the parameters are inside the .json file… :frowning:

Using RequestBin, here are the responses I get from Postman (left) and Bubble (right) with the same request:

Trying to bridge the gaps I was seeing between Postman and Bubble queries in the RequestBin response, I added a few headers to Bubble so now the Bubble query looks almost exactly identical to the working Postman request:

Unfortunately, the API still rejects the request when issued from Bubble :frowning:

Compare the “query” portion of each, I bet Postman has the ability to add the content-type for the form field while Bubble cannot like your topic title is basically asking for :sweat_smile:
For each one:
Copy paste just the properties (the { } and everything between) of the “query” object into a unescaper like Free Online JSON Escape / Unescape Tool - FreeFormatter.com
Then put then into a prettifier like Best JSON Pretty Print Online

So both are readable

Looks like other ppl have needed this Composing multipart/form-data with a different Content-Type on each parts with Javascript (or Angular) - Stack Overflow

I sense time for a CUSTOM plugin to make the API call :rofl: :rofl: If you can’t send the raw body data identical to Postman (which I think you’ve tried already?)

1 Like

Thanks Tyler!
That’s what’s troubling me… The query strings from Postman and Bubble are EXACTLY the same!

I don’t know what Postman is doing in the shadows that make the requests work :sweat_smile:

Yes I’ve tried to send the following raw body data but I’m not sure if the format is right (I’m kind of a noob).
As I understand it, here is the raw body data of the Postman request that works:

Here is the request I tried in Bubble:

With this I get the same error as before: “Content-Type ‘application/octet-stream’ is not supported”

Analyzing the only request that works with Bubble (adding the json query as a .json file in the API request), here is what I get in both Postman (left) and Bubble (right):

Blindly, I tried to add the ‘“mimetype”: “application/json”’ option in my json query string to see if it would work but still no luck…

It’s def the content-type specific to each form data parameter that Postman lets you add. :thinking:

Yes, and I guess this will be a feature request or a plugin dev since I can’t seem to make raw body requests work…

You can make it work with a file, by using one of the plugin that create json or txt file and send the file using API Connector. The API Really expect the json to be in multipart form format and this is why you need to send a file.

1 Like

Thanks Jici, I considered this option but couldn’t find a way to dynamically create a .json file that I could then store somewhere within Bubble.

Because as far as I know, the only way I can pass the .json to the API is with its url. For this I’m guessing that I need to store the .json somewhere I can retrieve its url from (file Bubble thing, or even file manager?) and pass it during the API request.

Either a fixed url through the API Connector:

Or a dynamic URL when I use the “get data from an external API” source in the editor:

I’ll try with a plugin like this one and report back: JSON file generator Plugin | Bubble