ReactJs视频通话应用：fetch/axios无法获取Agora Token求助

1. 核心问题：别用mode: 'no-cors' #

这个模式会让浏览器屏蔽所有响应内容，你根本无法获取返回的Token，完全解决不了跨域问题，直接去掉它。

2. 修复服务端CORS配置 #

这是跨域请求失败的最常见原因，确保你的Agora Token服务（不管用Express还是其他框架）配置了正确的CORS响应头：

// Express框架示例
const cors = require('cors');
// 允许前端域名（本地开发填localhost:3000，生产填你的React域名）
app.use(cors({
  origin: 'https://your-react-app-domain.com', 
  credentials: true // 如果请求需要携带认证信息，比如cookie
}));

测试阶段可以临时用origin: '*'确认问题，但生产环境必须指定具体域名。

3. 验证Token服务本身的可用性 #

• 登录Railway后台，查看Token服务的日志，确认是否接收到前端请求、有没有参数解析或Agora密钥错误。
• 用Postman直接调用Railway上的Token接口，传入channelName、uid等必要参数，确认能正常返回Token——先排除服务端本身的问题。

4. 前端请求的正确写法 #

去掉no-cors，用标准的fetch/axios请求，同时处理错误状态：

// Fetch示例
const fetchAgoraToken = async (channelName, uid) => {
  try {
    const res = await fetch(`https://your-railway-service-url/api/token?channelName=${channelName}&uid=${uid}`, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include' // 如果服务需要认证的话
    });
    if (!res.ok) throw new Error(`请求失败：${res.status}`);
    const data = await res.json();
    return data.token;
  } catch (err) {
    console.error('获取Token失败:', err);
  }
};

5. 本地开发的跨域临时解决方案 #

如果是用Create React App本地开发，可以在package.json中添加代理配置，避免跨域：

{
  "proxy": "https://your-railway-service-url"
}

添加后重启React应用，前端请求直接写/api/token即可，代理会自动转发到Railway服务。

6. 检查HTTPS兼容性 #

Railway部署的服务默认是HTTPS，若前端是HTTP（比如本地localhost:3000），部分浏览器会限制跨域请求，建议：

• 本地开发改用HTTPS（可以用HTTPS=true npm start启动React）
• 或者在服务端CORS配置中明确允许HTTP来源的请求。

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