如何在 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 })
      }
    )
}

基于this 的帖子，我在我的网站上创建了两个静态文件，分别名为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>