Почему браузеры не отображают данные JSON при получении из приложения Vue.js - PullRequest
Новая
       14

Почему браузеры не отображают данные JSON при получении из приложения Vue.js

0 голосов
/ 17 января 2019

Я пытаюсь получить данные из моего Python RESTfull API, реализованного во Flask, и я настроил следующий код.

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) заблокировала ответ перекрестного источника http://127.0.0.1:5000/alltasks сПриложение MIME типа / JSON.См. 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);
  });
}

Функция оповещения не выполняется, поскольку выдается ошибка.

Теперь я знаю, что был задан этот вопрос , и большинство ответов заключалось в том, чтобы запустить Chrome и отключить веб-безопасность, но действительно ли вы думаете, что каждый пользователь собирается это делать?

Что является причиной ошибки и какие библиотеки я могу использовать или модификацию кода я могу сделать, чтобы исправить ее?

1 Ответ

0 голосов
/ 18 января 2019

На каком порту работает ваше веб-приложение vue.js? Если он работает на другом порту, отличном от вашего API (обычно шаблоны Vue запускаются на порте 8080), запрос будет заблокирован, поскольку он рассматривается как другой источник (т. Е. 127.0.0.1:8080 -> 127.0.0.1:5000). Чтобы решить эту проблему, вы можете использовать библиотеку flask-cors и определить список источников, которым разрешен доступ к вашему API. Я никогда не использовал это раньше, поэтому я не могу дать конкретику. Документация находится здесь (раздел простого использования должен дать вам то, что вам нужно):

https://flask -cors.readthedocs.io / ен / последний /

В частности, вам просто нужно добавить это в начало вашего кода (сразу после определения приложения): 

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