1

我有一个网站，由 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 调用返回的结果？

4

1 回答 1

1

我可以让 jsonp 与这个一起工作，它不像你正在使用的那么旧。我会先用一个工作示例（比如我正在使用的网址）对其进行测试。

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>

于 2020-03-19T21:32:30.850 回答