Проводка данных с использованием Ax ios Api в Vue - PullRequest
Новая
       23

Проводка данных с использованием Ax ios Api в Vue

0 голосов
/ 02 февраля 2020

Я пытался использовать этот код для публикации данных с помощью Ax ios Api в Vue, когда я получаю следующие ошибки:

Доступ к XMLHttpRequest по адресу https://jsonplaceholder.typicode.com/todos 'from origin' null 'был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок' Access-Control-Allow-Origin '. 16_Axios_API_CRUD. html: 96 Ошибка: ошибка сети при e.exports (распространение. js: 25) в XMLHttpRequest.l.onerror (распространение. js: 25) 

 new Vue({
        el: "#app",
        data() {
          return {
            todos: [],
            newTodo: "",
            loading: true,
            errored: false
          };
        },
        methods: {          
          addToDo() {
            debugger;
            const _todo = {
              title: this.newTodo,
              completed: false
            };

            //const { title } = this.newTodo;
            axios
              .post("https://jsonplaceholder.typicode.com/todos", _todo)
              .then(res => (this.todos = [...this.todos, res.data]))
          }
        },
        mounted() {
          axios
            .get("https://jsonplaceholder.typicode.com/todos?_limit=5")
            .then(response => (this.todos = response.data))
        }
      });
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

    <div id="app">
      <input
        v-model.trim="newTodo"
      />
      <input
        value="Add"
        type="button"
        v-on:click="addToDo"
      />

      <section v-else>
        <div v-bind:key="todo.id" v-for="todo in todos">
          <div class="todo-item" v-bind:class="{'is-complete':todo.completed}">
            <p>
              {{todo.title}}
            </p>
          </div>
        </div>
      </section>
    </div>

Кто-нибудь сталкивался с этим сообщением об ошибке раньше? Нужен ли мне деструктор, который я заметил в каком-то уроке перед его публикацией? Не совсем понятно, почему в некоторых уроках есть деструктор.

Редактировать: похоже на проблему «медленной обработки». Я могу опубликованные данные после долгого времени. Как добавить некоторую «анимацию», чтобы показать, что она на самом деле публикует данные и возвращает их обратно?

1 Ответ

1 голос
/ 02 февраля 2020

Вы используете абсолютные URL. Есть два способа справиться с этим.

  • Настройка сервера для обработки заголовков CORS
  • Настройка локального обратного прокси-сервера с помощью такого инструмента, как webpack-dev-server или nginx.

Если вы выберете второе, которое рекомендуется вместо другого, ваш код будет выглядеть следующим образом: 

axios
          .post("/api/todos", _todo)
          .then(res => (this.todos = [...this.todos, res.data]))

И в вашем обратном прокси, сделанном возможным через webpack- dev-server: 

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'https://jsonplaceholder.typicode.com'
    },
    secure: true
  }
};

Подробнее об этом:

...