api - 为什么我无法获取此 API

Question

我正在开发这个东西以获得设定值。我已经准备好所有代码，我只需要这种方式将值带到前端。然而，获取给我带来了麻烦。

我正在尝试使用 VUE JS 获取 API，但即使 API（Python Flask）响应正确，获取也会失败。

该 API 在邮递员中运行良好。它也有交叉引用。并且这些消息没有给我任何错误，只是“获取失败”并且没有响应或返回它需要返回的值。

这是页面代码。

<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 %}

它应该使用 JSON 向服务器发送一个值，然后接收答案。为什么我不能取到它？

Edit1：这是所要求的 Flask 代码。

总体而言，这是一个非常简单的代码。

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()

标签： apivue.jsflaskpost