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

问题描述

我是新来的& JS。请帮助我解决以下问题。

I am new to react & JS. Please help me out in solving below problem.

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

Scenario: I am getting a SEE_OTHER type of response from the backend which contains a URL of the file, I need to download that file on browser.

来自后端的响应类似于：

Response from the backend is something like :

 { 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]
         .....
        }
 }

I正在尝试从响应中提取URL之后尝试下载文件并执行以下功能：

I'm trying to download the file after extracting URL from the response and execute below function below:

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

但是我在浏览器控制台上遇到了错误。

But I'm getting below error on browser console.

如果我使用

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

The issue is because browsers by default prevent cross origin/domain access for few security reasons. Please refer the following link,

这篇关于如何处理重定向请求以响应浏览器上的下载文件。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！