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

Question

我有一个网站，是用 Gatsby 创建的。其中一个页面上有一个表单，它需要 post 到不支持 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 })
      }
    )
}

基于 post，我在我的网站上创建了 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 与 this one 一起工作，它不像您正在使用的那么旧。我会先用一个工作示例来测试它（比如我正在使用的 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>

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

How to properly implement a JSONP form post submission on a Gatsby site

jsonp

reactjs

pardot

gatsby