为什么JSON.parse会抛出跨域错误？

Question

没有使用JSON.parse时，以下代码可以正常运行。如果我尝试解析或stringify我的数据对象，我会收到一个跨域错误。为什么会发生这种情况，我该如何解决？

我在Title.js中有以下代码片段：

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

这是我从Title.stories.js传递的数据对象：

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

我在Chrome中收到以下错误：

错误：抛出了跨域错误。在开发中，React无法访问实际的错误对象。 在http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:74131:19处调用受保护的回调函数（invokeGuardedCallbackDev） 调用受保护的回调函数（invokeGuardedCallback）http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:74175:31 开始工作$$1（beginWork$$1）http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:99439:7 执行UnitOfWorkhttp://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:98347:12 同步工作循环（workLoopSync）http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:98323:22 在根节点上执行同步工作（performSyncWorkOnRoot）http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:97891:11 在Fiber上安排更新（scheduleUpdateOnFiber）http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:97299:7 安排根更新（scheduleRootUpdate）http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:100654:3 在到期时间更新容器（updateContainerAtExpirationTime）http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:100682:10 更新容器（updateContainer）http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:100784:10

而在Firefox中出现了这个错误：

JSON.parse: 在 JSON 数据的第 1 行第 2 列发现意外字符 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/

- Some Name

---

这是依赖于浏览器的。在Chrome中，由于某种奇怪的原因，错误看起来是不透明的。在Firefox中，它不是不透明的。没有参考，但我不会感到惊讶如果这被认为是一个bug，他们还没有解决。 - CertainPerformance

请参见以下链接：https://dev59.com/QnA75IYBdhLWcg3wy8Ui#45433997。 - mojtaba ramezani

@CertainPerformance 火狐确实存在不同的错误。我已经在问题中添加了它。 - Some Name

Answer 1

这是因为您的attributes是一个对象而不是字符串。

/** 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

- Kelvin Low