（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。状态码：204答案

【问题标题】：(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。状态码：204
【发布时间】：2022-01-04 16:49:54
【问题描述】：

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

块引用跨域请求被阻止：同源策略不允许读取位于http://192.168.1.115:5000/journal/download/HP-protein-prediction.pdf-1641052987115.pdf 的远程资源。（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。状态码：204 块引用

我已启用 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

【问题讨论】：

尝试在你的 package.json 文件中使用代理。
在服务器端的 pacakge.json 文件中添加了这一行。还是不行.... "proxy": "localhost:5000",
不，添加前端。
在 package.json "proxy": { "/api/*": { "target": "http://localhost:5000", "changeOrigin": true } }, 中添加这个 sn-p 并像 /api/todo 一样使用它
我把这个 sn-p 复制到 package,json 的前端。并将 api 称为 /api/journal/download/HP-protein-prediction.pdf-1641052987115.pdf 200，但仍然不起作用。

标签： node.js reactjs express axios cors

【解决方案1】：

据我所知，每当您点击后端中的某些 API 将 pdf 发送到前端时，您都会尝试在前端下载 pdf 文件。我没有尝试过使用 Axios 库，但您可以尝试使用普通的 fetch 命令前端

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

对于后端，我使用的是 Nodejs，它有一个库 file-system 或 fs

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

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

【讨论】：

它不是本地主机，因为我在 app.listen 函数中指定了 ip
让我试试你的解决方案，看看它是否有效。
也许您可以尝试将其更改为 localhost 以检查它是否有效，因为这会产生 CORS 错误。或者你能不能只显示 app.listen 因为我记得我们没有指定要监听的端口而不是 IP 想知道你是怎么做的

【解决方案2】：

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

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

【讨论】：