React应用调用Google RSS接口遇403及CORS问题咨询

核心结论 #

谷歌新闻的公开RSS接口不需要API密钥，你碰到的CORS错误完全是浏览器同源策略的限制导致的：谷歌服务器没有返回Access-Control-Allow-Origin头允许你的localhost:3000域名跨域访问，因此前端直接发起fetch请求会被浏览器拦截。

可行解决方案 #

• React项目本地代理（推荐）
  如果是用Create React App搭建的项目，直接在package.json里添加代理配置：

  "proxy": "https://news.google.com"
  

  之后修改你的fetch请求地址，去掉域名部分：

  fetch('/rss/search?q=Industri+Mekanik+Elektrik&hl=id&gl=ID&ceid=ID:id')
    .then(response => response.text())
    .then(data => { /* 处理RSS数据 */ })
  

  这样请求会先转发到本地开发服务器，再由服务器去请求谷歌接口，避开浏览器的CORS限制。

• 开发环境临时用CORS代理
  可以在请求URL前加上CORS代理前缀（仅用于开发测试，生产环境不建议使用）：

  fetch('https://cors-anywhere.herokuapp.com/https://news.google.com/rss/search?q=Industri+Mekanik+Elektrik&hl=id&gl=ID&ceid=ID:id')
  

  注意部分CORS代理服务需要提前申请使用权限，否则可能无法正常工作。

• Chrome插件临时绕过（仅开发）
  安装Chrome插件「Allow CORS: Access-Control-Allow-Origin」，开启后可以临时绕过浏览器的CORS限制，方便开发调试，但上线前必须关闭，不能作为生产环境解决方案。

为什么不建议用mode: 'no-cors' #

提示里提到的mode: 'no-cors'会让请求变成不透明响应，你无法读取返回的RSS内容，完全满足不了获取新闻资讯的需求，所以不建议使用。

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