React Web应用图片下载在React Native WebView中出现CORS错误求助

我在React Web应用中实现了图片下载功能，代码如下：

const download = (e) => {
    e.preventDefault();
    axiosInstance
      .get(item?.doc_filename, {
        responseType: "blob", // 指定响应为二进制Blob类型
      })
      .then((response) => {
        const url = URL.createObjectURL(response.data);
        const link = document.createElement("a");

        link.href = url; // 将链接指向创建的Blob URL
        link.download = "offer_letter.png"; // 设置下载文件名

        document.body.appendChild(link); // 将链接添加到文档中
        link.click();

        URL.revokeObjectURL(url); // 清理Blob URL释放资源
      })
      .catch((err) => {
        console.log(err);
      });
  };

该功能在普通浏览器中运行正常，但将Web应用嵌入React Native的WebView渲染时，出现了CORS错误。

原因分析 #

WebView的跨域策略与普通浏览器存在差异：

• 若Web应用通过file://协议加载到WebView中，后端CORS配置通常不会允许该协议的跨域请求
• React Native WebView默认的跨域限制比浏览器更严格，即使后端配置了常规域名的CORS，也可能无法适配WebView的环境

解决方案 #

1. 后端调整CORS配置 #

针对WebView的特性，修改后端CORS响应头：

• 临时测试环境可设置Access-Control-Allow-Origin: *（生产环境禁用，需严格限制来源）
• 生产环境可添加允许file://协议，或者直接指定React Native应用对应的WebView访问来源
• 确保同时配置Access-Control-Allow-Methods: GET及必要的请求头参数

2. 配置React Native WebView的跨域属性 #

在WebView组件中添加属性放宽跨域限制（生产环境谨慎使用，注意安全风险）：

import { WebView } from 'react-native-webview';

// 组件内使用
<WebView
  source={{ uri: '你的Web应用地址' }}
  originWhitelist={['*']} // 允许所有来源请求
  allowUniversalAccessFromFileURLs={true}
  allowFileAccess={true}
/>

• originWhitelist: 定义允许的请求来源列表，['*']表示允许所有
• allowUniversalAccessFromFileURLs: 允许file://协议页面访问外部资源

3. 通过React Native原生能力处理下载 #

绕过WebView的跨域限制，直接用原生模块完成下载：

Web应用端：通过postMessage向React Native发送下载指令

const download = (e) => {
  e.preventDefault();
  // 向Native端传递下载信息
  window.ReactNativeWebView.postMessage(JSON.stringify({
    type: 'download-image',
    url: item?.doc_filename,
    filename: 'offer_letter.png'
  }));
};

React Native端：监听消息并调用原生下载API（以react-native-fs为例）

import { WebView } from 'react-native-webview';
import RNFS from 'react-native-fs';

const AppWebView = () => {
  const handleMessage = (event) => {
    const data = JSON.parse(event.nativeEvent.data);
    if (data.type === 'download-image') {
      const { url, filename } = data;
      const savePath = `${RNFS.DocumentDirectoryPath}/${filename}`;
      
      RNFS.downloadFile({
        fromUrl: url,
        toFile: savePath,
      }).promise.then(() => {
        console.log('图片下载完成');
        // 可添加弹窗提示用户下载完成
      }).catch(err => {
        console.error('下载失败:', err);
      });
    }
  };

  return (
    <WebView
      source={{ uri: '你的Web应用地址' }}
      onMessage={handleMessage}
    />
  );
};

export default AppWebView;

4. 简化下载逻辑：直接使用a标签跳转 #

若图片URL支持直接下载（后端正确配置Content-Disposition响应头），可跳过axios请求Blob，直接创建a标签：

const download = (e) => {
  e.preventDefault();
  const link = document.createElement("a");
  link.href = item?.doc_filename;
  link.download = "offer_letter.png";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

这种方式无需发起跨域请求，直接利用浏览器原生下载能力。

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