我有一个简单的纯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现场服务器,它的工作没有任何问题。
2条答案
按热度按时间5jdjgkvh1#
Parcel dev服务器isn't designed to serve static files。
您需要将它们托管在另一个Web服务器上。
如果需要它们位于同一原点,则可以将Parcel配置为充当代理。
jogvjijk2#
你在fetch响应中得到的是html而不是json。Parcel支持json imports
将类型
module
添加到脚本<script type="module" src="index.js"></script>
中,您可以像这样导入json: