XMLHttprequest在Gatsby-node + react- papparse中没有定义

Question

我刚开始学react和gatsby，但是看起来学起来很有趣。所以我的想法是建立一个网站，每一行都有一个页面的谷歌表格。你可以说，我想把google表单做成CMS。还有其他更简单的工具可以用于此，但有些只是停止开发，有些使用起来非常昂贵。所以我想手动使用papaparse插件。

我的google表格是为web发布的。以CSV的形式。我想使用react-papaparse浏览器内的CSVtoJSON解析。我的gatsby-node.js是从盖茨比文档中复制的，所以它是一个小的barebone。

in my gatsby-node.js

const papaparse = require("react-papaparse")
exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
const { createNode } = actions
const myData = papaparse.readRemoteFile("published sheet links",{
download: true,
header: true,
delimiter: ',',
dynamicTyping: true,
})
const nodeContent = JSON.stringify(myData)
const nodeMeta = {
id: createNodeId(`my-data-${myData.key}`),
parent: null,
children: [],
internal: {
type: `MyNodeType`,
mediaType: `text/html`,
content: nodeContent,
contentDigest: createContentDigest(myData)
}
}
const node = Object.assign({}, myData, nodeMeta)
createNode(node)
}

当我运行时，它抛出XMLHttpRequest未定义错误在我的谷歌表链接。看来是CORS的问题?解决这个问题的方法是什么?

谢谢

Answer 1

恐怕您将无法使用XMLHttpRequest，因为它将永远无法在Node服务器中可用(出于明显的原因)，它将在浏览器端可用，但在您的用例中，您需要它在Node服务器中可用，在构建时，创建您的模式。

你可以尝试使用其他抓取方法(fetch, axios等)或使用一些插件，如gatsby-source-google-sheets。你只需要安装插件和:

{
resolve: 'gatsby-source-google-sheets',
options: {
spreadsheetId: 'get this from the sheet url',
worksheetTitle: 'ie the name in the worksheet tab',
credentials: require('./path-to-credentials-file.json')
}
},

这将在构建时获取您的表，创建推断的GraphQL节点模式

资源:

• https://spectrum.chat/gatsby-js/general/referenceerror-xmlhttprequest-is-not-defined-on-production-build ~ 5 bc45c69 - 36 - e1 - 4 - ad4 b8d6 - 495 b5ec242bd
• 盖茨比XMLHttpRequest
• https://www.twilio.com/blog/2017/03/google-spreadsheets-and-javascriptnode-js.html
• https://www.gatsbyjs.com/docs/debugging-html-builds/