如何在 Gatsby 站点上正确实现 JSONP 表单提交

Question

我有一个网站，是用 Gatsby 创建的。 其中一个页面上有一个表单，它需要发布到一个不支持 CORS 但支持 JSONP 的端点。

我已经使用jsonp编写了这样的事件处理程序：

  const handleSumbit = async event => {
    event.preventDefault()
    jsonp(
      "https://go.pardot.com/form/id/code/",
      {
        timeout: 10000,
        params: {
          firstname: "fname",
          lastname: "lname",
          email: "an@email.com",
          company: "company",
        },
      },
      (err, data) => {
        console.log({ err }, { data })
      }
    )
}

基于这篇文章，我在我的网站上创建了 2 个静态文件，分别名为error.json和success.json 。 我已经尝试过这样的内容：

cb({"status":"succcess"})

只是

{"status":"success"}

我总是在控制台中收到一条错误消息，说请求超时，如果我将结果包装在jsonpCb()我也会收到一个说Uncaught ReferenceError: jsonpCb is not defined 。 我认为它工作了一半，因为它正在尝试运行该功能，并且正在保存表单数据。 在我的 React 组件中，我创建了一个名为 jsonpCb 的函数，它就是这样：

const jsonpCb = data => {
    console.log("fromJsonCb", { data })
  }

但是我觉得由于 React 打包的方式，这对结果来说是不可用的。

任何人都知道我如何实际获得 JSONP 调用返回的结果？

Answer 1

我可以让 jsonp 与这个一起工作，它没有你使用的那么旧。 我会先用一个工作示例来测试它（比如我正在使用的 url）。

 const App = () => { const [data, setData] = React.useState({ loading: true, }); React.useEffect(() => { const query = { callback: 'myCallback', url: 'https://jsonview.com/example.json', }; fetchJsonp( 'https://jsonp.afeld.me/?' + new URLSearchParams(query).toString() ) .then(function(response) { return response.json(); }) .then(function(json) { console.log('query was:', query); setData(json); }) .catch(function(ex) { console.log('parsing failed', ex); }); }, [setData]); return <pre>{JSON.stringify(data, undefined, 2)}</pre>; }; ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.1.3/fetch-jsonp.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>