Angular+Ionic应用仅iOS Safari出现Promise拒绝错误，疑似CORS问题

现象 #

• 基于Angular+Ionic开发的移动端Web应用，通过rss-parser库解析XML格式RSS内容，在PC端Chrome/Edge、Android设备上运行正常
• 在iPhone的Safari浏览器中打开时，出现循环TypeError错误（通过vConsole捕获到错误信息）
• 给RSS链接添加https://cors-anywhere.herokuapp.com/代理前缀后，Safari可正常运行；但自建cors-anywhere实例仍无法解决该问题

核心代码 #

apiUrl = 'https://rss.app/feeds/OMITTING.xml/';

async parseUrl() {
    let feed: any;
    await this.parser.parseURL(this.apiUrl)
    .then(result => {
      console.log('Result ok: ');
      console.log(result);
      feed = result;
    })
    .catch (error => {
      throw(error);
    });
    console.log('Out: ');
    console.log(feed);
    return feed!.items;
  }

问题分析 #

1. Safari的CORS策略特殊性：
   • Safari对跨域请求的预检（OPTIONS）处理比其他浏览器更严格，尤其是对非标准请求头、响应头的校验
   • 部分浏览器会自动兼容简单跨域请求，但Safari要求完整的CORS响应头（如Access-Control-Allow-Credentials、Vary: Origin等），否则会直接拦截请求
2. 自建cors-anywhere配置缺失：
   • 自建代理实例可能未正确配置响应头，比如未动态匹配请求的Origin、缺少Vary: Origin导致Safari缓存错误的跨域响应，或者未开启允许凭证的参数
3. rss-parser默认请求的隐患：
   • rss-parser的parseURL方法内部发起的请求可能携带了非简单请求头，触发Safari的预检机制，而目标RSS服务器未正确响应预检请求

解决方案 #

方案1：修正自建cors-anywhere的配置 #

修改自建代理的server.js，补充关键CORS配置：

const corsAnywhere = require('cors-anywhere');

const host = process.env.HOST || '0.0.0.0';
const port = process.env.PORT || 8080;

corsAnywhere.createServer({
  originWhitelist: [], // 允许所有来源，或指定你的应用域名列表
  requireHeader: ['origin', 'x-requested-with'],
  removeHeaders: ['cookie', 'cookie2'],
  setHeaders: {
    'Access-Control-Allow-Credentials': 'true',
    'Vary': 'Origin'
  }
}).listen(port, host, () => {
  console.log(`CORS Anywhere running on ${host}:${port}`);
});

重启代理服务后，确保应用请求指向自建代理地址。

方案2：手动控制请求流程，规避rss-parser默认请求 #

改用Angular的HttpClient先获取XML内容，再传入rss-parser的parseString方法，完全掌控请求头：

import { HttpClient } from '@angular/common/http';
import Parser from 'rss-parser';

constructor(private http: HttpClient) {}

apiUrl = 'https://rss.app/feeds/OMITTING.xml/';

async parseUrl() {
  try {
    // 用HttpClient获取XML，指定响应类型为文本
    const xmlContent = await this.http.get(this.apiUrl, { responseType: 'text' }).toPromise();
    const parser = new Parser();
    const feed = await parser.parseString(xmlContent);
    return feed.items;
  } catch (error) {
    console.error('解析失败:', error);
    throw error;
  }
}

这种方式避免了rss-parser内部请求的不确定性，同时更便于调试跨域相关的请求/响应细节。

方案3：优化目标RSS服务器的CORS配置 #

若有权限修改RSS服务器配置，直接添加以下响应头：

• Access-Control-Allow-Origin: *（或指定你的应用域名）
• Access-Control-Allow-Methods: GET, OPTIONS
• Access-Control-Allow-Headers: Content-Type
• Vary: Origin
  配置完成后可直接请求RSS链接，无需代理。

关键注意事项 #

• Safari的跨域缓存机制严格，测试前需清除浏览器缓存（设置-> Safari-> 清除历史记录与网站数据）
• 避免混合使用async/await与.then/.catch，改用try/catch结构更便于捕获和调试错误

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