Fatal编程技术网
  • api/
  • 为什么可以'；我不能获取这个API吗

为什么可以'；我不能获取这个API吗

api vue.js flask post

为什么可以'；我不能获取这个API吗,api,vue.js,flask,post,Api,Vue.js,Flask,Post,我开发这个东西是为了得到一个设定值。我已经准备好了所有的代码，我只需要用这种方法将值带到前端。然而，取回给我带来了麻烦 我试图使用VUE JS获取API，但即使API（Python Flask）响应正确，获取也会失败 API在《邮递员》中运行良好。它也有交叉引用。消息没有给我任何错误，只是“fetch failed”，没有响应或返回它需要返回的值 这是页面代码 <link rel="stylesheet" href="https://stackpath.boo

我开发这个东西是为了得到一个设定值。我已经准备好了所有的代码，我只需要用这种方法将值带到前端。然而，取回给我带来了麻烦

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

API在《邮递员》中运行良好。它也有交叉引用。消息没有给我任何错误，只是“fetch failed”，没有响应或返回它需要返回的值

这是页面代码

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


{%extends'base.html%}
{%block title%}主页{%endblock%}
{%block content%}
{%if user.u经过身份验证%}
Olá{{user.username}}！pesquisas日志：
#
佩斯基萨多酒店
恩德雷索
Cidade/Estado
信息
霍拉·佩斯基萨
1.
做记号
奥托
@mdo
佩斯奎斯·塞普·德塞哈尔！
CEP：





{%else%}


小集团，小集团，小集团，小集团


Caso prefira apenas consultar o CEP使用funço abaixo：

CEP领事：
CEP：

#
CEP
恩德雷索
Cidade/Estado
信息
1.
做记号
奥托
@mdo
var Vue=新的Vue({
el:'领事馆'，
数据：{
cep:（$（'cep_input'）.val（）），
信息：{}，
infoPT:{}，
infoEN:{}
},
方法：{
sendCEPLocal:function（）
{
console.log（this.cep）
console.log（$（'cep_input'）.val（））
const requestOptions={method:“POST”，
标题：{“内容类型”：“应用程序/json”，}，
正文：JSON.stringify（{cep:$（'cep_input'）.val（）}）
};
取回（“http://127.0.0.1:5000/cep/local/“，请求选项）
。然后（响应=>{
console.log（响应）
})
}
},
beforeMount（）{
}
});
{%endif%}
{%endblock%}
它应该使用JSON向服务器发送一个值，然后接收答案。为什么我不能去拿

Edit1：这是要求的烧瓶代码

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

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

导入烧瓶
导入json
从烧瓶进口请求
从报废进口*
从烧瓶进口烧瓶
从LASKU cors进口cors
从flask_cors进口cors，交叉原产地
导入日志记录
app=烧瓶（名称）
CORS（应用程序）
cors=cors（应用程序，资源={r”/*：{“源”：“*”}）
app=烧瓶。烧瓶（\uuuuu名称\uuuuuuu）
app.config[“DEBUG”]=True
app.config['CORS_HEADERS']='Content Type'
@app.route（'/'，方法=['GET']）
def home（）：
return“远程阅读档案此网站是一个科幻小说远程阅读的原型API。
”
@app.route（'/cep/logs'，methods=['GET']）
def日志（）：
返回busca_日志（）
@app.route（'/cep/correios/'，methods=['POST']）
@交叉起源（）
定义cep_correios（）：
cep=request.json['cep']
打印（cep）
返回验证正确性（cep）
@app.route（'/cep/local/'，methods=['POST']）
@交叉起源（）
def cep_local（）：
cep=request.json['cep']
返回验证cep本地（cep）
app.run（）
能否添加服务器端代码？主要是app.run部分OK，将在editso中添加代码，使其在网络中可见，您应该执行
app.run（host='0.0.0'）
以了解更多信息。。。