Skip to content

读取json文件中的数据出现431状态码 #82

@RookieTerry

Description

@RookieTerry

如题,前端环境是vue3+typescript,我的json数据存储在本地,但是不知道为什么,数据的内容出现在了http请求get参数中,导致报错431 (Request Header Fields Too Large)。数据的内容不应该以http请求的方式读取吧?
vue文件中script标签代码如下:

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
// 导入JSON数据
import kgOneData from './kg_one.json';

const graphArea = ref<HTMLElement | null>(null);

// 动态加载 CSS
function loadCSS(href: string): void {
  const cssLink = document.createElement('link');
  cssLink.href = href;
  cssLink.rel = 'stylesheet';
  cssLink.type = 'text/css';
  document.head.appendChild(cssLink);
}

// 动态加载 JS
function loadJS(src: string): Promise<HTMLScriptElement> {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Script load error for ${src}`));
    document.body.appendChild(script);
  });
}

onMounted(async () => {
  // 加载 CSS
  loadCSS('/lib/interactive-graph-0.1.0/interactive-graph.min.css');
  loadCSS('/lib/jquery-3.2.1/jquery-ui.css');
  loadCSS('/lib/font-awesome-4.7.0/css/font-awesome.min.css');

  // 顺序加载 JS
  await loadJS('/lib/jquery-3.2.1/jquery-3.2.1.min.js');
  await loadJS('/lib/jquery-3.2.1/jquery-ui.js');
  await loadJS('/lib/interactive-graph-0.1.0/interactive-graph.min.js');

  // 确保 interactive-graph 和 jQuery 已加载
  // 这里假设你已经以某种方式声明了 `igraph` 的类型
  if (graphArea.value) {
    // 类型断言,假设已经为 GraphNavigator 声明了类型
    const app = new (igraph as any).GraphNavigator(graphArea.value, 'LIGHT');
    app.loadGson(kgOneData, {
      "onGetNodeDescription": function(node: any) {
        let description = "<p align=center>";
        if (node.image !== undefined) {
          description += "<img src='" + node.image + "' width=150/><br>";
        }
        description += "<b>" + node.label + "</b>" + "[" + node.id + "]";
        description += "</p>";
        if (node.info !== undefined) {
          description += "<p align=left>" + node.info + "</p>";
        } else {
          if (node.title !== undefined)
            description += "<p align=left>" + node.title + "</p>";
        }
        return description;
      }
    }, function() {});
  }
});
</script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions