由于跨域锚标签下载不起作用答案

【问题标题】：Due to cross origin anchor tag download not working由于跨域锚标签下载不起作用
【发布时间】：2016-02-26 07:39:17
【问题描述】：

我正在使用锚标记下载并通过服务器 URL 尝试下载媒体文件，它在 Chrome 中运行良好（下载文件）但在 IE、MS Edge 和 Firefox 中它开始流式传输视频.

这是我的代码：

<a id="lnkDownloadVid" class="btn-download" href="http://cdn.example.com/Media/ATV521Dec16.mp4" download="">

我尝试通过 jquery ajax 访问 URL，但出现跨域错误。

//Create a simple AJAX Request to Google and alert the results
alert("Request Start");
$.ajax({
    crossDomain: true,
    headers: {
        "Content-Disposition": "attachment; filename=http://cdn.example.com/Media/ATV521Dec16.mp4"
    },
    url: "http://cdn.example.com/Media/ATV521Dec16.mp4",
    success: function (data) {
        alert(data);
    },
    error: function () {
        alert("error");
    }
});
alert("Request Ends");

我也试过了，但仍然出现跨源错误：

var request = createCORSRequest("get", "http://cdn.example.com/Media/ATV521Dec16.mp4");
if (request) {
                // Define a callback function
                alert("Define a callback function");
                request.onload = function () { };
                // Send request
                alert("Send request");
                request.send();
            }

任何可能的解决方案或我错过了什么？我需要在不使用服务器端的情况下进行下载，也就是说直接通过 URL 下载。我有点击按钮我需要下载文件。它在 chrome 中工作，但在 IE 和 firefox 中，当我单击它开始流式传输的按钮时。

【问题讨论】：

右键另存为
我需要它在按钮上工作，只需在 IE 和 Firefox 上的按钮上单击它的开始流式传输。
你需要使用ajax吗？为什么不让浏览器下载文件，跨域问题就消失了……
@LDj 我只需要下载媒体文件，不一定通过 ajax。我正在使用锚标签的“下载”属性，但它在 firefox 和 IE 中不起作用，对于 IE 和 firefox，它会自动启动媒体流。
@mplungjan，我添加了 preventDefault() 现在它甚至没有流媒体。其次我们无法访问cdn。

标签： jquery asp.net html

【解决方案1】：

旧版浏览器不支持download 属性 - 在这种情况下为 IE

除非您可以更改 CDN 以提供 application/octet-stream 的标头，否则我建议这样做：

<a id="lnkDownloadVid" class="btn-download" 
href="http://cdn.example.com/Media/ATV521Dec16.mp4" download=""><span
id="message" style="display:none">
 If this does not download when clicked, use the context menu 
 (normally right click or long click on touch devices) to save
</span>
<script>
$("#lnkDownloadVid").hover(
  function() { $(this).next().show(); },       
  function() { $(this).next().hide(); }
);
</script>

【讨论】：

感谢您的建议，但我想强制用户单击按钮进行下载。我不明白为什么下载属性适用于 chrome 但不适用于 Firefox 和 IE。在 Firefox 和 IE 中，它开始流式传输。
这个link说：这个属性只适用于同源资源的链接。
我猜它实际上被您的 Chrome 和下载忽略了，因为您的 chrome 不直接支持 mp4。
可能是，我会寻找解决方案，我会在这里发布。