title: Error callback always firing even when successful on the server
body: <p>I'm learning REST API with Python flask and JavaScript.</p>
  <p>I've created the API successfully but whenever I try calling it with Ajax or JavaScript it fails but on the flask server it shows the 200 response.</p>
  <p>My flask code:</p>
  <pre><code>from flask import Flask, jsonify
  
  app = Flask(__name__)
  
  tasks = [
      {
          'id': 1,
          'title': u'Buy groceries',
          'description': u'Milk, Cheese, Pizza, Fruit, Tylenol', 
          'done': False
      },
      {
          'id': 2,
          'title': u'Learn Python',
          'description': u'Need to find a good Python tutorial on the web', 
          'done': False
      }
  ]
  
  @app.route('/todo/api/v1.0/tasks', methods=['GET'])
  def get_tasks():
      return jsonify({'tasks': tasks})
  
  if __name__ == '__main__':
      app.run(debug=True)
  </code></pre>
  <p>Html Code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Api Learn&lt;/title&gt;
      &lt;script src=&quot;js/jQuery.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;bulma/bulma.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section class=&quot;section&quot;&gt;
          &lt;button id=&quot;fetch&quot; class=&quot;button is-link is-large&quot;&gt;Click&lt;/button&gt;
      &lt;/section&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>JavaScript code:</p>
  <pre><code>const baseUrl = &quot;http://127.0.0.1:5000/todo/api/v1.0/tasks&quot;;
  
  
  $(&quot;document&quot;).ready(function() {
      $(&quot;#fetch&quot;).click(function() {
          fetch(baseUrl)
          .then(function(data) {
              console.log(data)
          })
          .catch(function(error) {
              console.log(error)
          })
  
      })
  });
  </code></pre>
  <p>Error message on console:</p>
  <pre><code>stack:TypeError: Failed to fetch
  message:Failed to fetch
  </code></pre>
  <p>But successful on flask backend:</p>
  <pre><code>127.0.0.1 - - [01/May/2021 20:03:51] &quot;GET /todo/api/v1.0/tasks HTTP/1.1&quot; 200 -
  </code></pre>
  <p>Whenever I called it with curl it's always successful:</p>
  <pre><code>$ curl -i &quot;http://localhost:5000/todo/api/v1.0/tasks&quot;
  </code></pre>
  <p>The curl response:</p>
  <pre><code>HTTP/1.0 200 OK
  Content-Type: application/json
  Content-Length: 317
  Server: Werkzeug/1.0.1 Python/3.9.4
  Date: Sat, 01 May 2021 19:06:23 GMT
  
  {
    &quot;tasks&quot;: [                                    {
        &quot;description&quot;: &quot;Milk, Cheese, Pizza, Fruit, Tylenol&quot;,
        &quot;done&quot;: false,
        &quot;id&quot;: 1,
        &quot;title&quot;: &quot;Buy groceries&quot;
      },                                          {
        &quot;description&quot;: &quot;Need to find a good Python tutorial on the web&quot;,
        &quot;done&quot;: false,
        &quot;id&quot;: 2,
        &quot;title&quot;: &quot;Learn Python&quot;
      }
    ]
  }
  </code></pre>