Ionic项目CORS问题求助：后端文件直接分享至WhatsApp

问题根源 #

1. 前端HTTP请求受浏览器CORS策略限制，导致跨域报错
2. 现有代码仅完成文件下载保存，未实现WhatsApp分享逻辑

解决方案 #

1. 用原生HTTP插件绕过CORS #

前端请求受同源策略约束，改用Ionic原生HTTP插件发起原生网络请求，彻底避开CORS限制：

先安装依赖：

npm install @ionic-native/http @capacitor/share
ionic cap sync

修改代码：

import { HTTP } from '@ionic-native/http/ngx';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Share } from '@capacitor/share';

// 组件类中注入HTTP
constructor(private http: HTTP) {}

async shareFiles() {
  try {
    const imageUrl = 'https://lead247.in/images/floorplans/1632742852-1528349324-master-plan.jpg';
    
    // 原生HTTP请求获取二进制数据
    const response = await this.http.get(imageUrl, {}, {
      responseType: 'blob'
    });

    // Blob转Base64
    const reader = new FileReader();
    reader.onloadend = async () => {
      const base64Data = reader.result?.toString().split(',')[1];
      if (!base64Data) return;

      // 保存文件到设备文档目录
      await Filesystem.writeFile({
        path: 'downloaded-image.jpg',
        data: base64Data,
        directory: Directory.Documents
      });

      // 获取文件绝对URI
      const fileUri = await Filesystem.getUri({
        path: 'downloaded-image.jpg',
        directory: Directory.Documents
      });

      // 分享到WhatsApp（系统分享弹窗可直接选择）
      await Share.share({
        title: '分享图片',
        url: fileUri.uri,
        dialogTitle: '选择分享应用'
      });

      console.log('分享完成');
    };

    reader.readAsDataURL(response.data);

  } catch (error) {
    console.error('操作失败:', error);
  }
}

2. 后端配置CORS（备选方案） #

若无法使用原生插件，要求后端添加跨域响应头：

• 允许你的应用域名（或*用于测试）
• 允许GET方法
• 暴露必要响应头

示例后端响应头配置：

Access-Control-Allow-Origin: 你的Ionic应用域名
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type

3. 平台权限配置 #

• Android：在android/app/src/main/AndroidManifest.xml中添加

  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  

• iOS：在ios/App/App/Info.plist中添加

  <key>NSDocumentsFolderUsageDescription</key>
  <string>需要访问文档目录保存分享文件</string>
  

内容的提问来源于stack exchange，提问作者Pooja S G