XMLHttprequest 未在 Gatsby-node + react-papaparse 中定义

Question

我是react和gatsby的新手，不过看起来学起来有点意思。所以我的想法是建立一个网站，每行 Google 表格都有一个页面。所以你可以说我想制作 google sheets CMS。还有其他更容易使用的工具，但有些只是停止开发，有些使用起来非常昂贵。所以我想用papaparse插件手动制作。

我的 google sheet 以 CSV 格式“发布到网络”。我想使用 react-papaparse 进行浏览器内 CSVtoJSON 解析。我的 gatsby-node.js 是从 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)
}

当我运行时，它会在我的 google sheet 链接中抛出 XMLHttpRequest is not defined 错误。所以这似乎是关于 CORS 问题？解决方法是什么？

谢谢

Answer 1

恐怕您将无法使用 XMLHttpRequest 因为它在 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 节点架构

资源：

XMLHttprequest 未在 Gatsby-node + react-papaparse 中定义

XMLHttprequest is not defined in Gatsby-node + react-papaparse

reactjs

xmlhttprequest

gatsby

papaparse