axios获取快速服务器的请求是首次成功的。
axios获取快速服务器的请求是首次成功的。
提问于 2022-11-02 00:43:51
我正试图为我的Vue应用程序设置一个由Express服务器支持的下载视频的路径。由于某些原因，发送到后端的第一个请求正按预期工作，它将导致文件下载成功；然而，随后的请求在Network Error中失败，我只收到一个类似于这个http://localhost:8080/download/videos/1667163624289.mp4 net::ERR_FAILED 200 (OK)的简短错误消息。
这里有什么问题？
我有一个Express.js服务器(localhost:8000)，安装了cors，如下所示：
const express = require("express");
const app = express();
const port = 8000;
const cors = require("cors");
app.use(cors());
app.get("/download/:kind/:fileName",
async (req, res, next) => {
const file = `${__dirname}/public/files/${req.params.kind}/${req.params.fileName}`;
res.download(file);
});
app.listen(port, () => {
});和my (localhost:8080)组件发送请求，如下所示：
downloadVideo(fileName) {
const fileName = fileDir.split('/').pop();
const downloadUrl = `/download/videos/${fileName}`;
axios({
method: "get",
url: downloadUrl,
responseType: 'blob',
})
.then((response)=> {
// create file link in browser's memory
const href = URL.createObjectURL(response.data); // data is already a blob
// create "a" element with href to file & click
const link = document.createElement('a');
link.href = href;
link.setAttribute('download', 'my_video.mp4');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(href);
})
.catch((err) => {
// HANDLE ERROR HERE
})
},我还有一个vue配置设置，将请求代理到8000:
// vue.config.js
module.exports = {
devServer: {
proxy: 'http://localhost:8000',
disableHostCheck: true
},
outputDir: '../backend/public', // build will output to this folder
assetsDir: '' // relative to the output folder
}回答 2
Stack Overflow用户
发布于 2022-11-04 02:51:12
与手动设置下载文件的路径不同，您可以直接将静态文件目录设置为控制器，并删除用于下载的app.get控制器。
app.use(express.static("public/files"))然后，在客户端，不必使用JS下载文件，而是将其转换为数据url，然后下载它，您可以执行以下操作：
downloadVideo(fileName) {
// whatever you want to do to the file name
const parsedFileName = fileName
const link = document.createElement('a');
link.href = parsedFileName;
link.setAttribute('download', 'my-video.mp4'); // or pdf
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}这是一个样本工作实例
Stack Overflow用户
发布于 2022-11-21 14:15:25
我真的不知道为什么第一个请求会通过。但是这个错误看起来像个CORS问题。
基本上，您的前端和后端运行在不同的端口上，CORS检查将它们视为完全不同的服务器。
我从cors软件包文档中获取了以下配置
var express = require('express')
var cors = require('cors')
var app = express()
var corsOptions = {
origin: 'http://localhost:8080',
optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}
/*
Or use this, if you want to bypass cors checks - not a safe practice
var corsOptions = {
origin: '*',
optionsSuccessStatus: 200
}
*/
app.get('/products/:id', cors(corsOptions), function (req, res, next) {
res.json({msg: 'This is CORS-enabled for only localhost:8080'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})200错误很有趣，因为通常200表示OK。但在这种情况下，200指的是飞行前请求，并错误地指出港口是不同的。
在youtube上有一个关于cors的好视频
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74283241
复制相关文章
相似问题
腾讯云开发者
