我将使用 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？
浏览器不支持 JSON 作为表单提交的媒体类型（支持的类型在规范中列出）。
从网页发出此类请求的唯一方法是使用 XMLHttpRequest 对象。
Google 提供了一个 JavaScript 库（包装了 XMLHttpRequest），可以与他们的URL Shortener API进行交互。
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。否则，也可以在会话 ID cookie 上使用 sameSite 属性来防止 CSRF ( https://www.owasp.org/index.php/SameSite )。
使用 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);
}
});
以上工作完美。