Почему я получаю сообщение "Извините, но book_management_front не работает должным образом, если не включен JavaScript. Пожалуйста, включите его, чтобы продолжить"? - PullRequest
Новая
       8

Почему я получаю сообщение "Извините, но book_management_front не работает должным образом, если не включен JavaScript. Пожалуйста, включите его, чтобы продолжить"?

0 голосов
/ 21 апреля 2020

Приложение vue работает, страницы отображаются корректно, но когда я отправляю запрос на получение через ax ios, тело ответа выглядит довольно крипти c: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>book_management_front</title>
  <link href="/js/about.js" rel="prefetch"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but book_management_front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>

Я знаю то есть html должно отображаться, если JavaScript не включено в моем браузере, но это так. Кроме того, я вижу, что этот HTML является индексом. html из папки publi c, созданной vueCli, но я не могу понять, как он достиг тела ответа.

Код следующее: store / index. js

import Vue from 'vue'
import Vuex from 'vuex'
import bookService from '@/service/BookService.js';

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    books: []
  },
  mutations: {
    SET_BOOKS(books) {
      this.state.books = books
    }
  },
  actions: {
    fetchBooks(context) {
      bookService.getAllBooks()
        .then(response => {
          console.log("request successful: " + response.data)
          context.commit('SET_BOOKS', response.data)
      })
        .catch(error => {
          console.log("Error on get request: " + error)
        })
    }
  },
  modules: {
  }
})

BookService. js: 

import axios from 'axios';

const apiClient = axios.create({
  baseUrl: `http://localhost:9001/books`,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
})

const bookService = {
  getAllBooks() {
    return apiClient.get('/')
  }
}

export default bookService

И мой компонент просмотра: шаблон просто фиктивный, меня интересует книги компьютерная собственность. 

<template>
  <div>
    <b-container fluid>
      <b-row>
        <b-col>
          <BookElement />
        </b-col>
        <b-col>
          <BookElement />
        </b-col>
        <b-col>
          <BookElement />
        </b-col>
        <b-col>
          <BookElement />
        </b-col>
        <b-col>
          <BookElement />
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import BookElement from "@/components/BookElement.vue";
export default {
  components: {
    BookElement
  },
  created() {
    this.$store.dispatch("fetchBooks");
  },
  computed: {
    books() {
      return this.$store.state.books;
    }
  }
};
</script>

<style scoped>
</style>

1 Ответ

0 голосов
/ 22 апреля 2020

Я понял, что при создании экземпляра ax ios неправильно указывал свойство baseURL . Это должен быть "baseURL", а не "baseUrl".

...