Question

我正在尝试从Flask中实现的Python RESTfull API中获取数据，并且设置了以下代码。

tasks = {
  '1' : 'Learn',
  '2' : 'Build',
  '3' : 'Apply',
  '4' : 'Succeed'
}

@app.route('/alltasks')
def get_tasks():
   return jsonify(tasks)

当我在网址栏中输入http://127.0.0.1:5000/alltasks作为原始URL并显示JSON数据时，路由工作正常。

{
  "1": "Learn", 
  "2": "Build", 
  "3": "Apply", 
  "4": "Succeed"
}

问题是我正在尝试从Vue.js应用程序访问数据，但是Chrome和其他浏览器一直在给我这个错误：

跨域读取阻止（CORB）阻止了MIME类型为application / json的跨域响应http://127.0.0.1:5000/alltasks。有关更多详细信息，请参见https://www.chromestatus.com/feature/5629709824032768。

我确认该API正在做应做的事情，因为我创建了一条仅返回一条消息的虚拟路由：

@app.route('/hi')
def say_hello():
    return 'Thank you for checking out my API'

，Vue接受它就很好了，并显示在Chrome的网络诊断工具中。这是使用Axios的代码：

created: function() {
    this.loadAllTasks();
},
methods: {
loadAllTasks: function () {
    alert('At it');
    axios.get('http://127.0.0.1:5000/alltasks')
    .then(function(res, req){
        alert(res);
  });
}

警报功能未执行，因为引发了错误。

现在我知道有人问this question，大多数答案是运行Chrome并禁用网络安全性，但是您真的认为每个用户都将这样做吗？

是什么原因导致该错误，我可以使用哪些库或可以对其进行代码修改以解决该问题？

Answer 1

您的vue.js网络应用程序在哪个端口上运行？如果它在与API不同的端口上运行（通常vue模板在端口8080上运行），则该请求将被阻止，因为它被视为不同的来源（即127.0.0.1:8080-> 127.0.0.1:5000）。为了解决这个问题，您可以使用flask-cors库并定义允许访问您的api的来源列表。我以前从未使用过它，因此无法提供具体信息。文档在此处（“简单用法”部分应为您提供所需的内容）：

https://flask-cors.readthedocs.io/en/latest/

特别是，您只需要将此代码添加到代码顶部（在定义应用程序之后）：

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

从Vue.js应用获取

1 个答案: