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

Question

我正在使用锚标签下载，并在通过服务器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中，当我点击按钮时，它就会开始流媒体。

Answer 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>