Expo Snack网页端React Native Fetch JSON数据失败求助

我帮你排查这个问题！你遇到的TypeError: Failed to fetch在Expo Snack网页版里其实挺常见的，主要和网页环境的限制有关，咱们一步步来解决：

最直接的解决方案：用Expo Go打开Snack测试 #

网页版的Expo Snack是在浏览器的iframe中运行的，会受到浏览器的跨域策略限制——哪怕目标URL是HTTPS且支持跨域，iframe环境有时候还是会拦截请求。

你可以点击Snack右上角的「Run on device」按钮，用手机上的Expo Go APP扫码打开你的项目，再点击测试按钮，这时候是在原生环境运行，没有跨域限制，应该能正常打印出JSON数据。

进一步排查错误详情 #

如果想搞清楚具体原因，可以把catch里的错误打印得更详细，替换你的catch代码：

.catch(error => {
  console.error('Fetch错误信息:', error.message);
  console.error('错误详情:', error);
});

这样能看到更具体的报错，比如是否是CORS（跨域资源共享）问题，还是网络连接问题。

备选方案：换用Axios替代Fetch #

有时候Fetch在网页Snack里的兼容性不如Axios，你可以试试这个方法：

1. 在Snack的「Dependencies」面板里添加axios依赖
2. 修改你的代码：

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import axios from 'axios'; // 导入axios

export default class App extends Component {
  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.handleOnPress}>
          <Text>test</Text>
        </TouchableOpacity>
      </View>
    );
  }
  handleOnPress = () => {
    console.log('test was clicked');
    axios.get('https://facebook.github.io/react-native/movies.json')
      .then(response => console.log(response.data))
      .catch(error => console.error('Axios错误:', error));
  };
}

然后在网页版Snack里测试，大概率能正常获取数据。

额外验证步骤 #

先在浏览器里直接访问https://facebook.github.io/react-native/movies.json，确认这个URL能正常返回JSON内容——如果打不开，那就是网络问题；如果能打开，那肯定是Snack网页环境的限制导致的。

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