Fetch() returns "TypeError: Network request failed" for specific URL

Code example below returns rather generic TypeError: Network request failed, but when I try to visit the URL in Chrome there’s no issue. What needs to be modified below? Note: I don’t see a similar error with other URLs

import React, { Component } from "react";
import { render } from "react-dom";

const getStandardsTable = () => {
  const url = "https://strengthlevel.com/strength-standards/lat-pulldown";
  console.log(url);
  fetch(url)
    .then(function (response) {
      console.log(response);
      return response.text();
    })
    .then(function (html) {
      console.log(html);
      var parser = new DOMParser();
      var doc = parser.parseFromString(html, "text/html");
      console.log(doc);
      const table = doc.querySelectorAll(".standards__table")[0];
      return table.innerHTML;
    })
    .catch(function (err) {
      console.log("Failed to fetch page: ", err);
    });
};

class App extends Component {
  state = {
    data: []
  };

  componentDidMount() {
    this.getDataFromApi();
  }

  getDataFromApi = () => {
    console.log(getStandardsTable());
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.getDataFromApi}> Click me to fetch </button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Edit: This example fetches HTML and produces no error (React native running on Android via Expo):

import React, { Component } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      isLoading: true
    };
  }

  async componentDidMount() {
    fetch('https://www.york.ac.uk/teaching/cws/wws/webpage1.html')
      .then((response) => response.text())
      .then((html) => {
        this.setState({ data: html });
      })
      .catch((error) => console.error(error))
      .finally(() => {
        this.setState({ isLoading: false });
        console.log(this.state.data);
      });
  }

  render() {
    const { data, isLoading } = this.state;

    return (
      <View style={{ flex: 1, padding: 24 }}>
      </View>
    );
  }
};

Stackoverflow is asking me to provide some more details and I’ve already provided enough so this is just some text to waste space and make the validation succeed

84 thoughts on “Fetch() returns "TypeError: Network request failed" for specific URL”

Leave a Comment