SyntaxError: Unexpected token " in JSON at position 0

时间:2021-02-02 11:13:24

标签: javascript json express server fetch

我在请求快递时出错。我有这个获取:

fetch(`http://localhost:4200/dist/js/server.min.js`, {
    method: "POST",
    // mode: 'no-cors',
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(`<html><body><div style="background-color: yellow;"><p>Hello World!</p></div></body></html>`),
  }).then((response) => {
      console.log(response)
  })

我的快递服务器有这样的代码:

const { exec }   = require("child_process"),
      express    = require("express"),
      bodyParser = require('body-parser'),
      webshot    = require('webshot'),
      PORT       = 4200,
      app        = express(),
      cors       = require('cors')

// app.use(cors())

app.use((req, res, next) => {
    res.append('Access-Control-Allow-Origin', 'http://localhost:4242');
    res.append('Access-Control-Allow-Methods', 'POST', 'GET', 'OPTIONS');
    res.append('Access-Control-Allow-Headers', 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');
    res.append('Access-Control-Allow-Credentials', 'true');
    next();
    
});

// app.use(express.json());
app.use(bodyParser.json());

app.get('/dist/js/server.min.js', (req, res) => {
    res.send('<h1>Hello</h1>')
})

app.post('/', function(req, res) {
    htmlData = req.body
    screen(htmlData) // just my function
});

app.listen(PORT, () => {
    console.log(`What's my age again? ${PORT}, I guess.`)
});

我在浏览器中遇到了这个错误:

POST http://localhost:4200/dist/js/server.min.js 400 (Bad Request)

在控制台中:

SyntaxError: Unexpected token " in JSON at position 0
    at JSON.parse (<anonymous>)
    at createStrictSyntaxError (/home/joe/Documents/vscode-projects/html-projects/swipeskins/node_modules/body-parser/lib/types/json.js:158:10)
    at parse (/home/joe/Documents/vscode-projects/html-projects/swipeskins/node_modules/body-parser/lib/types/json.js:83:15)
    at /home/joe/Documents/vscode-projects/html-projects/swipeskins/node_modules/body-parser/lib/read.js:121:18
    at invokeCallback (/home/joe/Documents/vscode-projects/html-projects/swipeskins/node_modules/body-parser/node_modules/raw-body/index.js:224:16)
    at done (/home/joe/Documents/vscode-projects/html-projects/swipeskins/node_modules/body-parser/node_modules/raw-body/index.js:213:7)
    at IncomingMessage.onEnd (/home/joe/Documents/vscode-projects/html-projects/swipeskins/node_modules/body-parser/node_modules/raw-body/index.js:273:7)
    at IncomingMessage.emit (events.js:198:15)
    at endReadableNT (_stream_readable.js:1139:12)
    at processTicksAndRejections (internal/process/task_queues.js:81:17)

我猜,服务器在解析 json 数据时有问题。但为什么?代码有什么问题?

非常感谢您抽出宝贵时间,如果您对我的情况有一些想法,我将非常感谢您的来信。

3 个答案:

答案 0 :(得分:0)

您的 JSON 的顶级数据类型是字符串:

<块引用>
JSON.stringify(`<html>...</html>`);

JSON 规范的当前版本允许 JSON 文本中的顶级数据类型为任何 JSON 数据类型。

原始版本只允许一个对象或一个数组。

错误消息说将 " 作为第一个字符是一个错误,这意味着它不支持字符串作为顶级数据类型(因此实现了原始规范)。


更改 JSON 的结构,使其以对象或数组开头:

{
    "html": "<html>...</html>"
}

或更改您发送的数据格式:

"Content-Type: text/html"

 body: "<html>...</html>" // without JSON.stringify

显然,您需要更改服务器端代码以接受更改后的格式。

答案 1 :(得分:0)

问题是 express JSON 正文解析器默认只接受可以解析为 JSON objects 的输入。但是,您可以通过禁用“严格”解析将其更改为接受其他类型的有效 JSON 数据(包括字符串,如在 OP 中):

app.use(express.json({strict: false}));

这是对我有用的解决方法。

参考:https://github.com/expressjs/express/issues/1725#issuecomment-22844485

答案 2 :(得分:-1)

在请求正文中,您没有解析 DOM 元素,因此您可以执行以下操作:

const parser = new DOMParser();
const raw = '<html><body><div style="background-color: yellow;"><p>Hello World!</p></div></body></html>';
const body = parser.parseFromString(raw, 'text/html');

fetch(`http://localhost:4200/dist/js/server.min.js`, {
    method: "POST",
    // mode: 'no-cors', // If you use 'no-cors' you will not get response body and some headers
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  }).then((response) => {
      console.log(response);
  })