Как правильно реализовать отправку формы JSONP на сайте Gatsby - PullRequest
Новая
       49

Как правильно реализовать отправку формы JSONP на сайте Gatsby

1 голос
/ 19 марта 2020

У меня есть сайт, созданный с помощью 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 файла stati c с именами 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?

1 Ответ

1 голос
/ 20 марта 2020

Я мог бы заставить 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 {JSON.stringify(data, undefined, 2)}
; }; ReactDOM.render ( , 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>
...