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

【问题标题】：Why aren't browsers displaying JSON data when fetched from Vue.js app为什么从 Vue.js 应用程序获取时浏览器不显示 JSON 数据
【发布时间】：2019-06-12 02:53:48
【问题描述】：

我正在尝试从我在 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 的跨域响应 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 并禁用网络安全，但你真的认为每个用户都会这样做吗？

是什么导致了错误，我可以使用哪些库或修改代码来修复它？

【问题讨论】：

您的 vue.js 网络应用在哪个端口上运行？如果它在与您的 API 不同的端口上运行（通常 vue 模板在端口 8080 上运行），则请求将被阻止，因为它被视为不同的来源（即127.0.0.1:8080 --> 127.0.0.1:5000）。为了解决这个问题，您可以使用 flask-cors 库并定义允许访问您的 api 的来源列表。我以前从未使用过它，所以我无法提供具体信息。文档在这里（简单用法部分应该为您提供所需的内容）：flask-cors.readthedocs.io/en/latest
@Joseph 是的，Vue 应用程序默认使用端口 8080。我会检查 flask-cors 看看它是否有帮助。
@Joseph 谢谢！成功了！
没问题！我会将该评论移至答案中，以便将其标记为已解决。

标签： javascript python vue.js flask flask-restful

【解决方案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": "*"}})

【讨论】：