如何处理重定向请求以响应浏览器上的下载文件。

Posted 2023-03-04

【中文标题】如何处理重定向请求以响应浏览器上的下载文件。

【英文标题】：How to handle redirect request in react to download file on browser.

【发布时间】：2018-07-25 09:43:54

【问题描述】：

我是 react 和 JS 的新手。请帮助我解决以下问题。

场景：我从后端收到 SEE_OTHER 类型的响应，其中包含文件的 URL，我需要在浏览器上下载该文件。

来自后端的响应类似于：

  status:"SEE_OTHER" 
        context: 
          ...
          ...
          headers: 
               Access-Control-Allow-Methods: ["GET, POST, DELETE, PUT"]
               Access-Control-Allow-Origin: ["*"]
               Location:[url from where file is to be downloaded]
         .....
           
 

我正在尝试从响应中提取 URL 后下载文件并执行以下函数：

 async download(url) 
    let res = await fetch(URL.format(url));

    if(res.status >= 400) 
      throw Error(`HTTP error: $res.status`);
    
    if(res.status === 200) 
     setTimeout(() => 
       window.location.href = res.url;
     , 100);
    
    

但我在浏览器控制台上遇到以下错误。

加载失败 'www.xyz.com/abc.json' 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:2000” 使用权。如果不透明的响应满足您的需求，请设置请求的 模式为“no-cors”以获取禁用 CORS 的资源。

如果我在 chrome 上使用 this extension，上面的代码可以工作。但是什么是这个问题的永久解决方案。

另外，有什么方法可以直接从响应中下载文件。

【参考方案1】：

如果您使用 express，请在后端服务中使用以下软件包来解决问题。

https://github.com/expressjs/cors

这个问题是因为浏览器在默认情况下会出于一些安全原因阻止跨源/域访问。请参考以下链接，

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：

通过在请求的资源服务器的响应标头中添加 Access-Control-Allow-Origin 来解决此问题。上面提供的链接有助于了解 CORS 的关键概念。谢谢。