Angular中从外部URL上传文件时遭遇CORS错误求助

问题描述 #

尝试从外部URL获取文件时触发CORS错误，使用的代码如下：

await fetch(url).then(function (res) { 
  response = res;
}).catch(function () {
  setTimeout(() => {
    this.toaster.error('Invalid URL', 'File Upload', {
      positionClass: 'toast-top-right'
    });
  });
});

遇到的错误提示：

从源 'http://localhost:4200' 访问 'https://www.africau.edu/images/default/sample.pdf' 已被CORS策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。如果不透明响应满足你的需求，请将请求的模式设置为 'no-cors' 以在禁用CORS的情况下获取资源。

解决方案 #

1. 临时方案：设置请求模式为no-cors #

如果不需要读取返回的文件内容（比如仅用于缓存或转发），可以修改fetch请求，添加mode: 'no-cors'参数：

await fetch(url, { mode: 'no-cors' })
  .then(function (res) { 
    response = res;
    // 注意：此时res是不透明响应，无法调用res.json()、res.text()等方法读取内容
  })
  .catch(function () {
    setTimeout(() => {
      this.toaster.error('Invalid URL', 'File Upload', {
        positionClass: 'toast-top-right'
      });
    });
  });

2. 长期可行方案：通过后端代理请求 #

CORS是浏览器的安全限制，服务器端请求不受此约束。可以搭建后端接口中转请求：

• 前端请求自有后端接口（比如/api/proxy-file），携带目标URL参数
• 后端向目标URL发起请求，获取文件内容后返回给前端
• 前端从后端接口拿到文件后进行后续处理

3. 配置目标服务器CORS规则 #

如果目标服务器可控或能联系到管理员，可要求对方在服务器配置中添加Access-Control-Allow-Origin响应头，允许你的前端域名（http://localhost:4200）访问。

内容的提问来源于stack exchange，提问作者AdityaB