Why does JSON.parse throw a cross-origin error?

Question

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 browser-dependent. In Chrome, the error looks opaque for some odd reason. In Firefox, it's not opaque. Don't have a reference, but I wouldn't be surprised if this is considered a bug that they haven't gotten around to fixing — CertainPerformance, Oct 07 '19 at 08:47
see https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome/45433997#45433997 — mojtaba ramezani, Oct 07 '19 at 08:53
@CertainPerformance Firefox does indeed have a different error. I added it in the question — Some Name, Oct 07 '19 at 09:06

score 0 · Answer 1 · answered Apr 19 '20 at 14:49

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

Why does JSON.parse throw a cross-origin error?

1 Answers1

Linked