React中发起XML链接fetch请求时遭遇CORS错误

问题重现 #

你的React代码尝试请求RealGM的RSS XML接口：

import './App.css';

function App() {
  fetch('https://basketball.realgm.com/rss/wiretap/0/0.xml')
    .then(response => response.text())
    .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
    .then(data => console.log(data))

  return (
    <div className="App">
    </div>
  );
}

export default App;

收到的错误提示（翻译后）：

从源 'http://localhost:3000' 访问 'http://basketball.realgm.com/rss/wiretap/0/0.xml' 被CORS策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 头。如果不透明响应能满足你的需求，请将请求的模式设置为 'no-cors' 以在禁用CORS的情况下获取资源。

可行的解决方法 #

1. 用React内置代理（推荐） #

浏览器的CORS限制只针对前端直接请求，你可以在package.json里加一行代理配置：

"proxy": "https://basketball.realgm.com"

然后修改fetch的请求路径：

fetch('/rss/wiretap/0/0.xml')

这样React会自动把请求转发到目标服务器，绕开CORS限制。

2. 启用no-cors模式（仅适用于不需要读取响应内容的场景） #

如果只是要发送请求但不需要解析XML内容，可以设置mode: 'no-cors'，但这种方式下你无法读取返回的XML数据：

fetch('https://basketball.realgm.com/rss/wiretap/0/0.xml', {
  mode: 'no-cors'
})
.then(response => {
  console.log('请求已发送，但无法读取响应内容');
})

3. 后端中转请求 #

如果前端代理不够用，可以自己写个简单的后端接口（比如Node.js/Express），让后端去请求目标XML再返回给前端：

// 后端示例（Node.js/Express）
const express = require('express');
const fetch = require('node-fetch');
const app = express();

app.get('/api/rss', async (req, res) => {
  const response = await fetch('https://basketball.realgm.com/rss/wiretap/0/0.xml');
  const xml = await response.text();
  res.set('Content-Type', 'application/xml');
  res.send(xml);
});

app.listen(5000, () => console.log('代理服务运行在5000端口'));

然后前端请求自己的后端接口：

fetch('http://localhost:5000/api/rss')
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(data => console.log(data))

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