React应用调用Twitter API遭遇CORS跨域拦截问题求助

问题描述 #

开发React应用时，直接从前端调用Twitter API出现CORS错误：

Access to fetch at 'https://api.twitter.com/1.1/search/tweets.json?q=ewron' from origin 'http://localhost:3000' has been blocked by CORS policy:

使用相同Token在Postman中调用接口正常，但前端浏览器受同源策略限制，无法直接跨域请求Twitter API。

你的代码逻辑问题（额外提示） #

当前代码存在一个关键错误：第一个.then块未返回response.json()，导致后续.then中的data为undefined，即使解决CORS也无法获取有效数据。修正后的请求逻辑如下：

useEffect(() => {
    const url = 'https://api.twitter.com/1.1/search/tweets.json?q=something';
    fetch(url, {
        method: 'GET',
        headers: {
            Authorization: `Bearer ${token}`,
        }
    })
    .then((response) => {
        if(response.status === 404){
            console.log('404');
            return null;
        }
        else{
            console.log(response.status)
            return response.json(); // 必须返回解析后的响应数据
        }
    })
    .then((data) => {
        if (data) {
            console.log(data)
            setContent(data)
        }
    })
    .catch((e) => {
        console.log(e.message);
    })
}, [])

解决方案 #

方案1：React开发服务器代理（仅开发阶段） #

利用React自带的开发服务器代理功能，绕过浏览器的CORS限制：

• 在项目根目录的package.json中添加代理配置：

  "proxy": "https://api.twitter.com"
  

• 修改前端请求的URL，去掉域名部分：

  const url = '/1.1/search/tweets.json?q=something';
  

• 重启React开发服务器，此时请求会通过开发服务器转发，自动处理跨域问题。

方案2：后端中转服务（生产环境推荐） #

搭建一个简单的后端接口作为中转，由后端调用Twitter API（后端不受同源策略限制），前端再调用自己的后端接口：
以下是Node.js + Express的示例代码：

const express = require('express');
const fetch = require('node-fetch');
const app = express();

// 处理跨域
app.use(require('cors')());

// 中转Twitter搜索接口
app.get('/api/twitter-search', async (req, res) => {
  const token = '你的Twitter API Token';
  const query = req.query.q;
  if (!query) {
    return res.status(400).json({ error: '缺少搜索关键词' });
  }

  try {
    const response = await fetch(`https://api.twitter.com/1.1/search/tweets.json?q=${query}`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    const data = await response.json();
    res.json(data);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3001, () => console.log('中转服务运行在3001端口'));

• 前端修改请求URL为自己的后端接口：

  const url = 'http://localhost:3001/api/twitter-search?q=something';
  

• 生产环境部署时，将后端服务与前端一起部署，或配置域名转发，避免跨域问题。

方案3：切换到Twitter API v2（可选） #

Twitter API v2对CORS的支持更友好，部分端点允许直接从前端调用。如果你的业务需求可以切换到v2版本，可以尝试使用v2的搜索接口，减少中转成本。

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