React Native应用中如何从Twitter Embed API获取json.json文件

问题背景 #

根据Twitter文档，嵌入视频需使用oembed端点：https://publish.twitter.com/oembed?url={twitter_video_url}（示例：https://publish.twitter.com/oembed?url=https://twitter.com/infinite_red/status/1507392896739151882）。但目前该端点不再直接返回JSON响应，而是触发浏览器下载json.json文件，导致无法用axios/apisauce直接解析。尝试用rn-fetch-blob获取时，仅得到空状态的HTML数据，旧库也因Twitter的新改动失效。

可行解决方案 #

1. 自定义请求头，强制返回JSON响应 #

Twitter的oembed端点会根据请求头判断返回格式，添加Accept: application/json和模拟主流浏览器的User-Agent，可让端点直接返回JSON而非触发下载。

以axios为例：

import axios from 'axios';

async function getTwitterEmbed(tweetUrl) {
  try {
    const response = await axios.get('https://publish.twitter.com/oembed', {
      params: { url: tweetUrl },
      headers: {
        'Accept': 'application/json',
        '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'
      }
    });
    // 直接使用response.data中的嵌入数据，比如html字段就是嵌入用的代码
    console.log(response.data.html);
    return response.data;
  } catch (error) {
    console.error('获取嵌入数据失败:', error);
    return null;
  }
}

2. 处理下载的JSON文件（针对rn-fetch-blob） #

如果请求头方法无效，可尝试用rn-fetch-blob下载文件后解析内容：

import RNFetchBlob from 'rn-fetch-blob';

async function fetchAndParseTwitterEmbed(tweetUrl) {
  const endpoint = `https://publish.twitter.com/oembed?url=${encodeURIComponent(tweetUrl)}`;
  try {
    const res = await RNFetchBlob.config({
      fileCache: true,
      appendExt: 'json'
    }).fetch('GET', endpoint, {
      'Accept': 'application/json',
      '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'
    });
    const jsonString = await res.readFile('utf8');
    const embedData = JSON.parse(jsonString);
    // 清理缓存文件
    await res.flush();
    await res.close();
    return embedData;
  } catch (error) {
    console.error('处理嵌入文件失败:', error);
    return null;
  }
}

3. 使用WebView直接加载嵌入内容 #

如果上述方法都有问题，可跳过API请求，直接在React Native的WebView中加载Twitter官方的嵌入组件：

import { WebView } from 'react-native-webview';

function TwitterEmbed({ tweetUrl }) {
  const embedHtml = `
    <html>
      <body style="margin:0;">
        <blockquote class="twitter-tweet">
          <a href="${tweetUrl}"></a>
        </blockquote>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </body>
    </html>
  `;

  return <WebView source={{ html: embedHtml }} style={{ height: 450 }} />;
}

说明 #

Twitter的oembed端点行为变更后，核心是通过请求头引导其返回正确格式，模拟浏览器请求是关键。如果仍遇到HTML空状态，可更新User-Agent为当前主流浏览器的最新标识。

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