Why can't I get the fetch of this API

Question

I am developing this thing to get a set value. I have all the code ready I just need this way to bring the values to the front-end. However the fetch is giving me trouble.

I am trying to get an API using VUE JS but the fetch fails even if the API (Python Flask) is responding correctly.

The API works fine in postman. It also has cross reference in it. and the messages dont give me any errors just "fetch failed" and no response or return of the values it needed to return.

Here is the page code.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>


{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block content %}
{% if user.is_authenticated %}
<div id="consultaCEP">
<div class="container-fluid p-3 my-3 bg-dark text-white">
  Olá {{ user.username }}! Aqui estão os logs de pesquisas:
  <table class="table table-bordered table-dark">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">CEP Pesquisado</th>
        <th scope="col">Endereço</th>
        <th scope="col">Cidade/Estado</th>
        <th scope="col">Info</th>
        <th scope="col">Hora Pesquisa</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
    </tbody>
  </table>
  <div class="d-flex justify-content-center"><h2>
    Pesquise o CEP se desejar!
  </h2></div>
  <div class="d-flex justify-content-center">
    <div class="p-2">
      <p>CEP:  </p>
    </div>
    <div class="p-1"><input type="text"></div>
    <div class="p-1"><a href=""><button>Consultar Correios</button></a></div>
    <div class="p-1"><a href=""><button>Consultar Banco</button></a></div>

  </div>
  <p><a href="{% url 'logout' %}"><button class="button ">Sair</button></a></p>
  <p><a href="{% url 'password_reset' %}"><button class="button">Resetar senha</button></a></p>
</div>
</div>
{% else %}
<div id="consultaCEP">
<div class="container-fluid p-3 my-3 bg-dark text-white">

  <p></p>
  <p>Clique a baixo para entrar como ADMIN</p>
  <a href="{% url 'login' %}"><button class="button">Entrar</button></a>

  <div class = "row"><p class="text-center ">Caso prefira apenas consultar o CEP use a função abaixo:</p></div>
  
  <h1 class="d-flex justify-content-center">CONSULTA DE CEP:</h1>



  <div class="d-flex justify-content-center">
    <div class="p-2">
      <p>CEP:  </p>
    </div>
    <div class="p-1"><input type="text" id="cep_input" name="cep"   @keyup.enter="sendCEPLocal"/></div>
    <div class="p-1"><a href=""><button>Consultar Correios</button></a></div>
    <div class="p-1"><a href=""><button @click="sendCEPLocal">Consultar Banco</button></a></div>
  </div>

  


  <div class="response">
    <table class="table table-bordered table-dark">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">CEP</th>
          <th scope="col">Endereço</th>
          <th scope="col">Cidade/Estado</th>
          <th scope="col">Info</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>
</div>
<script>

    var Vue = new Vue({
        el: '#consultaCEP',
        data: {
      cep: ($('#cep_input').val()),
            info:{},

            infoPT:{},

            infoEN:{}

        },
        methods:{
            sendCEPLocal: function()
            {
        


      console.log(this.cep)
      console.log($('#cep_input').val())
      const requestOptions = {method: "POST",
        headers: { "Content-Type": "application/json", },
                  body: JSON.stringify({ cep: $('#cep_input').val() })
  };
  fetch("http://127.0.0.1:5000/cep/local/", requestOptions)
    .then(response => {
      console.log(response)
    })


            }


        },
        beforeMount(){
        }
    });
</script>

{% endif %}
{% endblock %}

It should send a value to the server with the JSON , then receive the answer. why can't I fetch it?

Edit1: here is the Flask code as requested.

It is a very straightforward code overall.

import flask
import json
from flask import request

from scrapper import *
from flask import Flask
from flask_cors import CORS

from flask_cors import CORS, cross_origin
import logging


app = Flask(__name__)
CORS(app)
cors = CORS(app, resources={r"/*": {"origins": "*"}})



app = flask.Flask(__name__)
app.config["DEBUG"] = True

app.config['CORS_HEADERS'] = 'Content-Type'











@app.route('/', methods=['GET'])

def home():

    return "<h1>Distant Reading Archive</h1><p>This site is a prototype API for distant reading of science fiction novels.</p>"


@app.route('/cep/logs', methods=['GET'])

def logs():
    return busca_log()




@app.route('/cep/correios/', methods=['POST'])
@cross_origin()
def cep_correios():
    cep = request.json['cep']
    print(cep)
    return verifica_cep_correios(cep)



@app.route('/cep/local/', methods=['POST'])
@cross_origin() 
def cep_local():
    cep = request.json['cep']
    return verifica_cep_local(cep)





app.run()