title: Why is fetch returning my React app's index.html instead of the URL I provided?
body: <p>I'm trying to make a fetch request in JavaScript. The goal is to get all the JSON from <a href="https://www.reddit.com/r/learnprogramming/new/.json?count=25&amp;after=" rel="nofollow noreferrer">here</a> into my React app. I think I'm using one of the simplest methods available, but I'm still managing to mess up..</p>
  
  <p>My expected result is a <code>console.log()</code> output with the json data. The result I'm getting instead is an error that says </p>
  
  <blockquote>
    <p>Uncaught (in promise) SyntaxError: Unexpected token &lt; in JSON at
    position 0</p>
  </blockquote>
  
  <p>In my exploration of the problem, I changed some of my code that says <code>.then(results =&gt; results.json())</code> to <code>.then(results =&gt; results.text())</code>. That shows me the text of whatever my fetch request is getting. I discovered it's not getting to the supplied URL at all, but instead is returning my app's homepage (index.html, located at "/", I think). Weird.</p>
  
  <p>Here is the abridged version of my code:</p>
  
  <pre><code>import React from "react";
  
  const hardcoded_url =
      "https://www.reddit.com/r/learnprogramming/new/.json?count=25&amp;after=";
  
  getJSON = () =&gt; {
          fetch(this.hardcoded_url)
              .then(results =&gt; results.json())
              .then(data =&gt; console.log(data));
      };
  
  render() {
      return (
          // &lt;react stuff&gt;
      )
  }
  
  </code></pre>
  
  <p>What my <code>console.log(data)</code> prints out is literally the <code>index.html</code> of my React app:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;!--- blah blah ---&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I can even see the request go off in my Developer Tools network tab. To me, it doesn't look right. It registers as <code>undefined</code> and under <code>Network -&gt; Headers -&gt; General</code>: </p>
  
  <blockquote>
    <p>Request URL: <a href="http://localhost:3000/undefined" rel="nofollow noreferrer">http://localhost:3000/undefined</a><br>
    Request Method: GET<br>
     Status Code: 304 Not Modified</p>
  </blockquote>
  
  <p>I've tried Googling the error messages and <code>javascript fetch url returns index.html</code>. The latter lead me to <a href="https://stackoverflow.com/questions/44852313/fetch-returns-html-source-of-the-my-own-index-html">this page</a> which <em>looked</em> promising, but adding the "proxy" line to my package.json didn't help (Specifically, I added: <code>"proxy": "http://localhost:3000"</code>). I also don't think it's a credentials problem because I can access the URL I'm after just from my browser.</p>
  
  <p>I don't understand why this isn't working out for me. I'm copying the form of code from somebody else's github project for my own little Reddit clone. Theirs works...</p>