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

如果没有 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 (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:74131:19 http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:74131:19） 在 invokeGuardedCallback (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:74175:31 http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:74175:31） 开始工作$$1 (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:99439:7 http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:99439:7） 在执行工作单元（http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:98347:12 http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:98347:12） 在工作中LoopSync (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:98323:22 http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:98323:22） 在performSyncWorkOnRoot处（http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:97891:11 http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:97891:11） 在 ScheduleUpdateOnFiber (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:97299:7 http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:97299:7） 在scheduleRootUpdate (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:100654:3 http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:100654:3） 在 updateContainerAtExpirationTime (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:100682:10 http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:100682:10） 在更新容器（http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:100784:10 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 http://localhost:9002/main.96db0eff63ba8f27231c.hot-update.js:38:26renderWithHooks@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:90029:18 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:90029:18挂载不确定组件@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:92444:13 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:92444:13开始工作$1@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:93793:16 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:93793:16回调@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:74071:14 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:74071:14调用GuardedCallbackDev@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:74120:16 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:74120:16调用GuardedCallback@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:74175:31 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:74175:31开始工作$$1@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:99439:7 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:99439:7执行工作单元@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:98350:12 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:98350:12工作循环同步@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:98323:22 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:98323:22PerformSyncWorkOnRoot@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:97891:11 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:97891:11调度更新光纤@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:97299:7 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:97299:7日程根更新@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:100654:3 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:100654:3updateContainerAtExpirationTime@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:100682:10 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:100682:10更新容器@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:100784:10 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:100784:10LegacyRenderSubtreeIntoContainer/http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:101372:7未批量更新@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:98084:12 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:98084:12传统RenderSubtreeIntoContainer@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:101371:5 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:101371:5使成为@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:101465:12 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:101465:12渲染/http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:11741:26使成为@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:11740:10 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:11740:10_被调用者$@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:11837:20 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:11837:20试着抓@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:127832:40 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:127832:40调用@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:128058:22 http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:128058:22定义迭代器方法/

这是因为你的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