获取 JSON 返回错误 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 and stat

Posted 2023-02-22

【中文标题】获取 JSON 返回错误 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 and status code 304: Not Modified

【英文标题】：Fetching JSON returns error Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 and status code 304: Not Modified

【发布时间】：2018-05-02 07:07:39

【问题描述】：

我正在尝试获取 JSON 文件，但它返回错误 Uncaught (in promise) SyntaxError: Unexpected token 和 304: Not Modified .我尝试添加标题 'Content-Type': 'application/json 和 'Accept': 'application/json' 但随后返回错误 404: Not found。

这是我获取 JSON 的代码：

import React from 'react';

export default class LabExperiment extends React.Component 

componentWillMount() 
    const readmePath = require("./docs/iat/iatDependency.json");

    fetch("./docs/iat/iatDependency.json")
    .then(response => 
        response.json();
    )
    .then(text => 
        console.log(text);
    );


render() 
    return(
        <div>Hello</div>
    )
  

这是我的 json 文件：

    "js": [
        "../jsPsych/jspsych.js",
        "../jsPsych/plugins/jspsych-iat-image.js",
        "../jsPsych/plugins/jspsych-iat-html.js",
        "../jsPsych/plugins/jspsych-html-keyboard-response.js"
    ],
    "css": [
        "../jsPsych/css/jspsych.css"
    ]

我也曾一度尝试使用response.text() 而不是json()，但它返回了我的index.html 文件。

过去一周我一直在网上寻找解决方案，但对其他人有效的方法对我无效。有什么建议吗？

编辑： 当我执行console.log(response.headers.get('Content-Type')) 时，它返回了text/html; charset=UTF-8。它不应该已经是应用程序/json吗？为什么初始编码是'text/html'？

【问题讨论】：

看起来你正在获取一个 html 文件而不是 json

是的，我知道。我一直在试图弄清楚为什么会这样。

如果您使用 Express，请尝试 res.json(myJson)。 expressjs.com/en/api.html#res.json

这也只是返回一个错误TypeError: Cannot read property 'prototype' of undefined。

304 表示自您上次检查以来页面未更改。 （因此，如果您清除缓存，它不应该在下一次尝试时出现 304，但之后会再次出现。）我不知道为什么 fetch 会错误地处理这个问题。我怀疑身体解释了 304，就像他们有时对 404 等做的那样。尝试fetch("./docs/iat/iatDependency.json", cache: ... )，使用在developer.mozilla.org/en-US/docs/Web/API/… 为cache 列出的值。此外，根据tools.ietf.org/html/rfc7232#section-4.1，304 响应不应该有正文；也许这让它感到困惑。

【参考方案1】：

检查您是否有 .env 文件 REACT_APP_API_URL=http://localhost:3001 在里面。该文件应位于根文件夹中。

【参考方案2】：

我认为您可能正在使用create-react-app。与create-react-app 一样，webpack-dev-server 用于处理请求，并且它为每个请求提供服务index.html。所以你得到了

JSON 中位置 0 和状态码 304 的意外标记

所以要解决这个问题，您可以执行以下操作：

运行npm run eject

之后，config 文件夹会在应用程序的根目录下创建。

转到config/webpackDevServer.config.js。

那么我们需要在webpackDevServer.config.js中设置disableDotRule: false。

    historyApiFallback: 
     // previously disableDotRule: true,
     disableDotRule: false,
    ,

将您的 json 文件（即 docs/iat/iatDependency.json）保存在 public 文件夹中。

使用fetch('/docs/iat/iatDependency.json').then(res => res.json()).then(data => console.log('data', data))