javascript 无法使用Parcel live服务器的fetch从本地json文件加载数据

ssm49v7z  于 2023-04-10  发布在  Java
关注(0)|答案(2)|浏览(148)

我有一个简单的纯javascript项目。当试图从javascript加载JSON文件的内容时,我得到了以下错误。没有什么花哨的,所有文件都在同一个文件夹中,但我不明白为什么它不工作。

index.js
function loadFiles() {
  fetch("test.json")
    .then((response) => response.json())
    .then((json) => console.log(json));
}
<html>
<head>
<script src="index.js"></script>
</head>
<body onload="loadFiles()">
  Hello
</body>
</html>

test.json

{
  "name": "John",
  "age":25,
}

package.json

{
  "name": "Sample Javascript",
  "version": "1.0.0",
  "description": "",
  "source": "index.html",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "7.19.0",
    "parcel": "^2.8.2"
  },
  "dependencies": {
    "@parcel/transformer-sass": "^2.8.2",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.3",
    "express": "^4.18.2",
    "jquery": "^3.6.3",
  }
}

Uncaught(in promise)SyntaxError:意外的标记“|”,“〈!DOCTYPE”...不是有效的JSONx 1c 0d1x
我尝试没有包裹现场服务器,但使用Visual Studio现场服务器,它的工作没有任何问题。

5jdjgkvh

5jdjgkvh1#

Parcel dev服务器isn't designed to serve static files
您需要将它们托管在另一个Web服务器上。
如果需要它们位于同一原点,则可以将Parcel配置为充当代理。

jogvjijk

jogvjijk2#

你在fetch响应中得到的是html而不是json。Parcel支持json imports
将类型module添加到脚本<script type="module" src="index.js"></script>中,您可以像这样导入json:

import data from './test.json';
console.log(data)

相关问题