Javascript 为什么浏览器在从Vue.js应用程序获取JSON数据时不显示JSON数据

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

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

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

当我在URL栏中输入原始URL作为http://127.0.0.1:5000/alltasks 并显示JSON数据

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

问题是我试图从Vue.js应用程序访问数据，但Chrome和其他浏览器不断给我这个错误：

跨源读取阻塞CORB使用MIME类型application/json阻塞跨源响应。有关更多详细信息，请参阅

我确认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);
  });
}

由于引发错误，因此未执行警报函数

现在我知道有人问了这个问题，大多数答案是运行Chrome并禁用网络安全，但你真的认为每个用户都会这么做吗

---

导致错误的原因是什么？我可以使用哪些库或修改代码来修复错误？

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

特别是，在定义应用程序后，您只需将其添加到代码顶部即可：

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

---

您的vue.js web应用程序运行在哪个端口？如果它运行在与API不同的端口上，通常vue模板运行在端口8080上，则该请求将被阻止，因为它被视为不同的源，即->。为了解决这个问题，您可以使用flask cors库并定义允许访问api的源代码列表。我以前从未使用过它，所以我无法给出具体细节。文档在这里“简单用法”部分应提供您所需的内容：@Joseph yes，Vue应用程序默认为端口8080。我会查一下flask cors看看是否有用。@Joseph谢谢！成功了！没问题！我会将该评论移动到答案中，以便将其标记为已解决。