我将与 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”内容-输入 HTTP 标头。
某些应用程序会检查 Content-Type HTTP 标头是否为“application/json”，因此它将防止 CSRF 攻击（除非您安装了 Flash Player：https://www.geekboy.ninja/blog/exploiting-json -跨站点请求伪造-csrf-使用-flash/）。更好的安全性是使用真实性令牌，即使数据类型不是 JSON，这也会保护 HTTP 请求。否则，也可以在会话 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);
}
});
以上效果完美。
@I'm to work with goo.gl for URL shortening. I need to make the following request:
Your HTML should be
<form method="post" action="https://www.googleapis.com/urlshortener/v1/" enctype="application/json">
<button type="submit"> submit </button>
</form>
In a POST request, resulting from an HTML form submission, the Content-Type of the request is specified by the **enctype** attribute on the <form> element and as you have mentioned your content-type is Content-Type: application/json so need to add enctype="application/json" in HTML code.