发布请求以包含“Content-Type”和 JSON答案

【问题标题】：Post request to include 'Content-Type' and JSON发布请求以包含“Content-Type”和 JSON
【发布时间】：2013-10-27 02:43:02
【问题描述】：

我将使用 goo.gl 来缩短 URL。我需要提出以下要求：

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

我的 html:-

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

如何在此处添加“内容类型”和 json？

【问题讨论】：

您可以通过 ajax 提交表单并在那里添加 content-type 。
@Ghost 为什么你需要使用 ajax？
@Prateek 默认内容类型是“application/x-www-form-urlencoded”，现在要更改它，应该更改表单的“enctype”属性。由于发送 JSON 数据所需的问题以及我建议使用这里也适用的 ajax 请求。我不知道如何在没有 ajax 的情况下发送 JSON 数据。

标签： html http post

【解决方案1】：

可以通过 Javascript 从浏览器发出 JSON POST 请求

大多数浏览器（自 2020 年起应支持 Fetch API）允许您使用 JSON 发出 POST 请求。 See the MDN reference here - 当然，您必须在 javascript 中执行此操作。

【讨论】：

【解决方案2】：

HTML 表单不支持 JSON，您必须使用 AJAX 发送 JSON。

但是如果你只是想测试一个应用程序的安全性，看看它是否容易受到 CSRF 攻击，有一个 hack 可以将 JSON 数据作为纯文本发送，如本文所述：https://systemoverlord.com/2016/08/24/posting-json-with-an-html-form.html

HTML 表单的优点是不需要启用 JavaScript，并且不像 AJAX XMLHttpRequest 那样具有同源策略保护，因此 HTML 表单可以将数据发送到任何第三方域。事实上，看起来也可以使用 XMLHttpRequest 向第三方域发送 GET 和 POST 请求（您只会收到一条警告，说您无法读取响应），即使 CORS 不允许，只要您不要将 Content-Type 标头更改为“application/json”：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS?redirectlocale=en-US&redirectslug=HTTP_access_control#Examples_of_access_control_scenarios

这是文章中的一个例子：

<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 标头。

某些应用程序会检查 Content-Type HTTP 标头是否为“application/json”，因此可以防止 CSRF 攻击（除非您安装了 Flash Player：https://www.geekboy.ninja/blog/exploiting-json-cross-site-request-forgery-csrf-using-flash/）。更好的安全性是使用真实性令牌，这将保护 HTTP 请求，即使数据类型不是 JSON。否则，也可以在 session ID cookie 上使用 sameSite 属性来防止 CSRF (https://www.owasp.org/index.php/SameSite)。

【讨论】：

这个答案对我帮助很大。最终创建了一个 javascript 库来启用它：github.com/keithhackbarth/submitAsJSON
@keithhackbarth 我更新了我的答案，我认为发送 JSON 的 HTML 表单只有在您想在不启用 JavaScript 的情况下发送数据时才有用（因此，如果没有 JavaScript，库将无法工作）。否则你可以直接使用 XMLHttpRequest。

【解决方案3】：

浏览器不支持 JSON 作为表单提交的媒体类型（支持的类型为 listed in the spec）。

从网页发出此类请求的唯一方法是使用 XMLHttpRequest 对象。

Google 提供了a JavaScript library（包装了 XMLHttpRequest），可以与他们的URL Shortener API 进行交互。

【讨论】：

【解决方案4】：

使用 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);
          }
    });

以上方法完美。

【讨论】：