时间戳

首页 > 解决方案 > 为什么我会收到“很抱歉，如果没有启用 JavaScript，book_management_front 将无法正常工作。请启用它以继续”？

javascript - 为什么我会收到“很抱歉，如果没有启用 JavaScript，book_management_front 将无法正常工作。请启用它以继续”？

问题描述

vue 应用程序工作正常，页面正确显示，但是当我通过 axios 发送 get 请求时，响应正文看起来相当神秘：

<!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>

我知道如果我的浏览器上没有启用 JavaScript，那么 html 应该显示，但确实如此。另外，我可以看到这个 HTML 是 vueCli 生成的公用文件夹中的 index.html，但我不明白它是如何到达响应正文的。

代码如下：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>

标签： javascriptvue.jsaxiosvuex

解决方案

我意识到在创建 axios 实例时我把属性baseURL错误了。它应该是“baseURL”，而不是“baseUrl”。

推荐阅读