(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204

Question

I am trying to download a PDF from my backend. and i am getting this error.

Blockquote Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.1.115:5000/journal/download/HP-protein-prediction.pdf-1641052987115.pdf . (Reason: CORS header 'Access-Control-Allow-Origin' missing). Status code: 204 Blockquote

I have enabled cors and tried a million things but it's not working. Here's my code Enabling Cors Code

Browser response

and finally my server side and frontend code Server Side

Frontend request using Axios

My Logged Error:

Logging error Error: Network Error

createError createError.js:16

handleError xhr.js:117

dispatchXhrRequest xhr.js:114
xhrAdapter xhr.js:15
dispatchRequest dispatchRequest.js:58
request Axios.js:108
method Axios.js:129
wrap bind.js:9
downloadJournal apiCalls.js:64
onClick ViewArticle.js:23
React 14
unstable_runWithPriority scheduler.development.js:468
React 15
js index.js:9
js main.chunk.js:14047
Webpack 7

Answer 1

So as far as I can understand you are trying to download a pdf file in the frontend whenever you hit some API in the backend that sends the pdf to the frontend. I haven't tried the same with the Axios library but you can try using a normal fetch command For Frontend

await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(body)
        })

            .then((response) =>
                response.blob()
            )
            .then((blob) => {
                console.log(blob)
                // Create blob link to download
                const url = window.URL.createObjectURL(
                    new Blob([blob]),
                );
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute(
                    'download',
                    `${e.target.value}.pdf`,
                );

                // Append to html link element page
                document.body.appendChild(link);

                // Start download
                link.click();

                // Clean up and remove the link
                link.parentNode.removeChild(link);
            });

For Backend, I was using Nodejs which has a library file-system or fs

var file = await fs.readFileSync(`location-to-pdf/${req.body.fileId}.pdf`)
   res.contentType("application/pdf");
   res.send(file)

As of my experience if we use app.use(cors()) without specifying any configuration it works without any problem The only doubt I had was about the URL of the API why is that not localhost whereas it's 192.168... if your app is running on localhost maybe you can send it directly to it without the rerouting

Answer 2

Major browsers its CORS policies prohibit this action, You CANNOT download any data from another domain/ip not the same of your frontend script domain/ip address. Backend & Frontend must be exist in the same domain. For development purpose, you can overcome this limitation by creating new shortcut with this target:

"[Path to Your Chrome]\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp