React中使用RSS parser请求跨域RSS feed返回403 CORS错误如何解决？

首先可排除CORS限制问题：浏览器CORS拦截会直接在控制台抛出跨域相关错误，不会返回403状态码，你收到403响应说明请求已成功发出，是服务端主动返回的拒绝结果，常见触发原因如下：

• 所用公共CORS代理的IP段已被Reddit官方拉黑，大量公共代理因被频繁用于爬虫等行为，早就被主流站点列入了访问黑名单
• 代理URL拼接格式错误，比如代理地址末尾漏写斜杠，导致最终请求的URL格式非法，被代理服务直接拒绝访问
• 请求未携带正常的User-Agent头，Reddit会主动拦截无UA、UA异常的请求直接返回403

• 本地开发阶段直接使用React内置代理：在项目package.json中添加配置项 "proxy": "https://www.reddit.com"，之后直接请求相对路径即可，本地开发服务会自动完成转发，无跨域问题也不会触发站点拦截：

const feed = await parser.parseURL('/.rss');

• 生产环境建议自建轻量代理接口，使用服务端发起请求规避跨域，同时可以自定义请求头避免被Reddit拦截，Node.js简易代理示例如下：

const express = require('express');
const request = require('request');
const app = express();
app.get('/reddit-rss', (req, res) => {
  request({
    url: 'https://www.reddit.com/.rss',
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
    }
  }).pipe(res);
});
app.listen(3001);

前端直接请求自建的/reddit-rss接口即可正常拿到RSS数据。

• 若必须使用公共CORS代理，先更换未被拉黑的小众公共代理，同时给rss-parser配置正常的UA请求头再发起请求：

const parser = new Parser({
  headers: {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
  }
});
// 注意拼接代理URL时，代理地址末尾要加斜杠避免格式错误
const feed = await parser.parseURL(CORS_PROXY + 'https://www.reddit.com/.rss');

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