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

【问题标题】：Why does JSON.parse throw a cross-origin error?为什么 JSON.parse 会抛出跨域错误？
【发布时间】：2020-02-04 13:08:47
【问题描述】：

如果没有 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) 在 invokeGuardedCallback (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:74175:31) 在开始工作$$1 (http://localhost:9002/vendors~main.dabd386ab27fa6eddf93.bundle.js:99439:7) 在 performUnitOfWork (http://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) 在 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 列出现意外字符

按钮@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 开始工作$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 调用GuardedCallback@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:74175:31 开始工作$$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 更新容器@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 渲染@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 _callee$@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:11837:20 tryCatch@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:127832:40 调用@http://localhost:9002/vendors~main.f1b2a3fffbb517f9fb67.bundle.js:128058:22 定义迭代器方法/

【问题讨论】：

这取决于浏览器。在 Chrome 中，由于某些奇怪的原因，该错误看起来不透明。在 Firefox 中，它不是不透明的。没有参考，但如果这被认为是他们尚未修复的错误，我不会感到惊讶
见stackoverflow.com/questions/3102819/…
@CertainPerformance Firefox 确实有不同的错误。我在问题中添加了它

标签： javascript reactjs storybook

【解决方案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

【讨论】：