（原因：缺少 CORS header ‘Access-Control-Allow-Origin’）。状态码：204

Question

我正在尝试从我的后端下载 PDF。我收到了这个错误。

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

我启用了 cors 并尝试了一百万种方法，但它不起作用。这是我的代码 Enabling Cors Code

Browser response

最后是我的服务器端和前端代码 Server Side

Frontend request using Axios

我记录的错误：

记录错误错误：网络错误

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

据我所知，每当您在后端点击某些 API 将 pdf 发送到前端时，您都在尝试在前端下载 pdf 文件。我没有对 Axios 库进行相同的尝试，但您可以尝试使用普通的获取命令 对于前端

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);
            });

对于后端，我使用的是具有库 file-system 或 fs

的 Nodejs

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

根据我的经验，如果我们使用 app.use(cors()) 而不指定任何配置，它可以正常工作 我唯一的疑问是 API 的 URL 为什么它不是本地主机，而它是 192.168...如果您的应用程序是运行在本地主机上，也许您可以无需重新路由直接发送给它

Answer 2

主要浏览器的 CORS 政策禁止此操作，您不能从与您的前端脚本 domain/ip 地址不同的另一个 domain/ip 下载任何数据。后端和前端必须存在于同一域中。出于开发目的，您可以通过使用此目标创建新的快捷方式来克服此限制：

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

（原因：缺少 CORS header ‘Access-Control-Allow-Origin’）。状态码：204

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

node.js

cors

express

reactjs

axios