如果没有 JSON.parse，以下代码可以正常工作。如果我尝试解析或字符串化我的数据对象，我会收到跨域错误。为什么会发生这种情况以及如何解决它？
我在 Title.js 中有以下代码:
const { name, show_title } = JSON.parse(data.attributes);
这是我从 Title.stories.js 传递的数据对象:
{"attributes":{"name":"testNameAttribute","show_title":"0"}}
我在 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)
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/
最佳答案
这是因为您的属性是一个对象而不是字符串
/** 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
关于javascript - 为什么 JSON.parse 会抛出跨域错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58266141/