为什么 JSON.parse 会抛出跨域错误? [英] Why does JSON.parse throw a cross-origin error?

问题描述

没有 JSON.parse 下面的代码可以正常工作.如果我尝试解析或字符串化我的数据对象，我会收到一个跨域错误.为什么会发生这种情况，我该如何解决?

我在 Title.js 中有以下一段代码:

const { name, show_title } = JSON.parse(data.attributes);

这是我从 Title.stories.js 传递过来的数据对象:

{"attributes":{"name":"testNameAttribute","show_title":"0"}}

我在 Chrome 中收到以下错误:

<块引用>

错误:引发了跨域错误.React 无权访问开发中的实际错误对象.在 Object.invokeGuardedCallbackDev (

Without JSON.parse the following code works fine. If I try to parse or stringify my data object, I receive a cross-origin error. Why is this happening and how can I fix it?

I have the following piece of code in Title.js:

const { name, show_title } = JSON.parse(data.attributes);

And this is my data object that I am passing along from Title.stories.js:

{"attributes":{"name":"testNameAttribute","show_title":"0"}}

I am receiving the following error in Chrome:

Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. at Object.invokeGuardedCallbackDev (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:74131:19) at invokeGuardedCallback (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:74175:31) at beginWork$$1 (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:99439:7) at performUnitOfWork (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:98347:12) at workLoopSync (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:98323:22) at performSyncWorkOnRoot (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:97891:11) at scheduleUpdateOnFiber (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:97299:7) at scheduleRootUpdate (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:100654:3) at updateContainerAtExpirationTime (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:100682:10) at updateContainer (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:100784:10)

And this error in Firefox:

JSON.parse: unexpected character at line 1 column 2 of the JSON data

Button@http://localhost:9002/main.96db0eff63ba8f27231c.hot-update.js:38:26 renderWithHooks@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:90029:18 mountIndeterminateComponent@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:92444:13 beginWork$1@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:93793:16 callCallback@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:74071:14 invokeGuardedCallbackDev@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:74120:16 invokeGuardedCallback@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:74175:31 beginWork$$1@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:99439:7 performUnitOfWork@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:98350:12 workLoopSync@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:98323:22 performSyncWorkOnRoot@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:97891:11 scheduleUpdateOnFiber@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:97299:7 scheduleRootUpdate@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:100654:3 updateContainerAtExpirationTime@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:100682:10 updateContainer@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:100784:10 legacyRenderSubtreeIntoContainer/<@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:101372:7 unbatchedUpdates@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:98084:12 legacyRenderSubtreeIntoContainer@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:101371:5 render@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:101465:12 render/<@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:11741:26 render@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:11740:10 _callee$@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:11837:20 tryCatch@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:127832:40 invoke@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:128058:22 defineIteratorMethods/

解决方案

This is because your attributes is an object instead of string

/** Attributes is a string */
const data = {
  "attributes": `{
    "name": "testNameAttribute",
    "show_title": "0"
  }`
};
const { name, show_title } = JSON.parse(data.attributes);
console.log(name) //Output "testNameAttribute"


/** Attributes is an object */
const data = {
  "attributes": {
    "name": "testNameAttribute",
    "show_title": "0"
  }
};
const { name, show_title } = JSON.parse(data.attributes);
console.log(name) //Error

这篇关于为什么 JSON.parse 会抛出跨域错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！