Разместить запрос, чтобы включить "Content-Type" и JSON

Мне нужно работать с goo.gl для сокращения URL. Мне нужно сделать следующий запрос:

POST https://www.googleapis.com/urlshortener/v1/url
Content-Type: application/json
{"longUrl": "http://www.google.com/"}

my html: -

<form method="post" action="https://www.googleapis.com/urlshortener/v1/">
    <button type="submit"> submit </button>
</form>

как мне добавить здесь 'content-type' и json?

ОТВЕТЫ

Ответ 1

Браузеры не поддерживают JSON в качестве типа носителя для представления форм (поддерживаемые типы перечислены в спецификации).

Единственный способ сделать такой запрос с веб-страницы - использовать объект XMLHttpRequest.

Google предоставляет библиотеку JavaScript (которая обертывает XMLHttpRequest), которая может взаимодействовать с их API-интерфейсом Shortener.

Ответ 2

HTML-формы не поддерживают JSON, вы должны использовать AJAX для отправки JSON.

Но если вы просто хотите проверить безопасность приложения, чтобы убедиться, что он уязвим для атаки CSRF, есть хак для отправки данных JSON в виде обычного текста, как описано в этой статье: https://systemoverlord.com/2016/08/24/оприходование-JSON-с-ан-HTML-form.html

HTML-форма не имеет политики защиты одного и того же происхождения, в отличие от AJAX XMLHttpRequest, поэтому форма HTML может отправлять данные в любой сторонний домен.

Вот пример из статьи:

<body onload='document.forms[0].submit()'>
  <form method='POST' enctype='text/plain'>
    <input name='{"secret": 1337, "trash": "' value='"}'>
  </form>
</body>

Однако если вы попытаетесь установить параметр формы enctype в "application/json" вместо "text/plain", он не будет распознан, и это приведет к по умолчанию "application-x-www-form-urlencoded" Content-Type HTTP-заголовок.

В некоторых приложениях будет проверяться, что HTTP-заголовок Content-Type является "application/json", поэтому он предотвратит атаку CSRF. Лучшей защитой будет использование токена аутентификации, это защитит HTTP-запросы, даже если тип данных не является JSON.

Ответ 3

Использование запроса Ajax облегчает жизнь.

    $.ajax({
          url: 'https://www.googleapis.com/urlshortener/v1/url',
          type: 'POST',
          data: JSON.stringify({
            longUrl: $scope.url
          }),
          contentType: 'application/json',
          success: function(got) {
            return alert("shortened url: " + got.id);
          }
    });

Вышеизложенное работает отлично.