Issue with Downloading Binary Files from Weweb Collection (CORS & Binary String Issue)

Ask us anything How do I?
1

I am experiencing an issue when trying to download a binary file (PDF) using a Weweb collection. The API I am using correctly returns binary data, but it appears that Weweb converts it to a string, causing the file to become corrupted when downloaded.

Additionally, this file is only available through an endpoint that requires authentication. When trying to fetch the file via JavaScript inside Weweb, I run into CORS issues.

Issue Description:

  • I am fetching a binary file (PDF) from an API that requires authentication .

  • The API correctly returns binary data (tested in Postman, where the file downloads correctly).

  • When I try to store the response in a Weweb collection, it appears that binary data is converted into a string.

  • When I attempt to download the file from Weweb, it becomes corrupted and cannot be opened. I have tried many different ways to convert it back to binary, nothing works.

  • Fetching the file using fetch() in JavaScript directly (inside Weweb) results in a CORS issue.

What I Have Tried:

  • Fetching the file in Postman → :white_check_mark: Works fine (file downloads correctly).

  • Fetching the file using fetch() in JavaScript (outside Weweb) → :x: Blocked by CORS issue .

  • Fetching it through Weweb’s collection → :x: File gets converted to a string , leading to corruption.

    1. Tried converting the string back to binary in JavaScript → :x: No success.

My Questions:

  1. How does Weweb handle binary file responses in collections? Does Weweb automatically convert binary data to a string? If so, is there a way to prevent this? How can I correctly store and retrieve binary files using Weweb’s collections?

  2. Is there a recommended way to bypass the CORS issue when fetching this file from an authenticated API?**

Any guidance on resolving this issue would be greatly appreciated. Thank you in advance for your help!

Jan, Chorizo Lab

Below is an example of Javascript code that I use to covert string to binary (not succesful)

const binaryData = collections[/* GET Attachment/file */ 'xxxxxxxxxxx']?.['d\ta']; // Adjust path as needed

console.log(binaryData);

if (binaryData) {
    // Convert text-based binary string back to proper binary
    function fixBinaryString(str) {
        const encoder = new TextEncoder();
        return encoder.encode(str); //
    }

    // Convert Weweb binary data to a proper PDF Blob
    const byteArray = fixBinaryString(binaryData);
    const pdfBlob = new Blob([byteArray], { type: "application/pdf" });

    // Create a URL for the Blob
    const pdfUrl = URL.createObjectURL(pdfBlob);

    // Create a hidden download link
    const downloadLink = document.createElement("a");
    downloadLink.href = pdfUrl;
    downloadLink.download = "document.pdf";  // Set file name

    // Append, trigger click, and remove link
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
} else {
    console.error("Binary file data not found in Weweb collection.");
}
2

You need to route this through a server.

3

I would actually prefer using the WeWeb collection, where I can use the proxy by WeWeb. I just don’t understand what happens to the binary file. Any ideas?

Unfortunately, handling the CORS in the backend I am using is kinda complicated, so I leave it as a second option :slight_smile:

4

What does the collection return? Can you post a sample? Maybe you need to set a proper header? How’s your collection’s setup? These are all of the unknowns we miss to be able to answer this.

5

Sorry, I cannot share the details…

But I made a workaround that solves the problem. Not sure if it is the best solution, but it works :slight_smile:

Instead of fetching the file directly from WeWeb, I set up an n8n workflow that:
• Starts with a Webhook node called from WeWeb
• Fetches the file from the source API
• Returns the binary file properly to WeWeb

Solved :white_check_mark:

6

¯\(ツ)/¯

1 Like
7

Sorry Broberto, that was not an answer that would lead me to solve the problem. I appreciate your help, but your answer doesnt help at all.

“You need to route it through the server” is general advice on CORS issue, I was looking for something more WeWeb specific.

8

I am still missing an answer to this point:

Any ideas?

9

You don’t need my not helpful answers bro. When you hit CORS, it means you need to route it through a server, assuming anything else is dumb. Even when you go through WeWeb’s option to “avoid CORS” what you’re doing is just well guess what … route it through WeWeb’s server.

1 Like