Html 发布请求以包含“内容类型”和 JSON
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19446544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Post request to include 'Content-Type' and JSON
提问by Sangram Singh
I'm to work with goo.gl for URL shortening. I need to make the following request:
我要使用 goo.gl 来缩短 URL。我需要提出以下要求：
POST https://www.googleapis.com/urlshortener/v1/url
Content-Type: application/json
{"longUrl": "http://www.google.com/"}
my html:-
我的 html:-
<form method="post" action="https://www.googleapis.com/urlshortener/v1/">
<button type="submit"> submit </button>
</form>
how do i add the 'content-type' and json here?
我如何在此处添加“内容类型”和 json？
回答by Quentin
Browsers do not support JSON as a media type for form submissions (the supported types are listed in the spec).
浏览器不支持 JSON 作为表单提交的媒体类型（支持的类型在规范中列出）。
The only way to make such a request from a web page is to use the XMLHttpRequest object.
从网页发出此类请求的唯一方法是使用 XMLHttpRequest 对象。
Google provide a JavaScript library(which wraps XMLHttpRequest) that can interact with their URL Shortener API.
Google 提供了一个 JavaScript 库（它封装了 XMLHttpRequest），可以与其URL Shortener API交互。
回答by baptx
HTML forms don't support JSON, you have to use AJAX to send JSON.
HTML 表单不支持 JSON，您必须使用 AJAX 发送 JSON。
But if you just want to test the security of an application, to see if it is vulnerable to a CSRF attack, there is a hack to send JSON data as plain text, like described in this article: https://systemoverlord.com/2016/08/24/posting-json-with-an-html-form.html
但是如果你只是想测试一个应用程序的安全性，看看它是否容易受到 CSRF 攻击，有一个 hack 将 JSON 数据作为纯文本发送，如本文所述：https: //systemoverlord.com/ 2016/08/24/posting-json-with-an-html-form.html
An HTML form has the advantage to not require JavaScript enabled and does not have a same-origin policy protection unlike AJAX XMLHttpRequest, so an HTML form can send data to any third-party domain. In fact it looks like it is also possible to send GET and POST request to third-party domains with XMLHttpRequest (you will just get a warning saying that you can't read the response), even if not allowed by CORS as long as you don't change the Content-Type header to "application/json": https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS?redirectlocale=en-US&redirectslug=HTTP_access_control#Examples_of_access_control_scenarios
HTML 表单的优点是不需要启用 JavaScript，并且与 AJAX XMLHttpRequest 不同，它没有同源策略保护，因此 HTML 表单可以将数据发送到任何第三方域。实际上，即使 CORS 不允许，也可以使用 XMLHttpRequest 向第三方域发送 GET 和 POST 请求（您只会收到一条警告说您无法读取响应）不要将 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
Here is an example from the article:
这是文章中的一个例子：
<body onload='document.forms[0].submit()'>
<form method='POST' enctype='text/plain'>
<input name='{"secret": 1337, "trash": "' value='"}'>
</form>
</body>
However if you try to set the enctype form parameter to "application/json" instead of "text/plain", it will not be recognized and it will result in the default "application/x-www-form-urlencoded" Content-Type HTTP header.
但是，如果您尝试将 enctype 表单参数设置为“application/json”而不是“text/plain”，它将无法识别，并且会导致默认的“application/x-www-form-urlencoded”内容类型HTTP 标头。
Some applications will check that the Content-Type HTTP header is "application/json", so it will prevent a CSRF attack (unless you have Flash Player installed: https://www.geekboy.ninja/blog/exploiting-json-cross-site-request-forgery-csrf-using-flash/). A better security would be to use an authenticity token, this will protect HTTP requests even if the data type is not JSON. Otherwise, it is also possible to use the sameSite attribute on the session ID cookie to prevent CSRF (https://www.owasp.org/index.php/SameSite).
一些应用程序会检查 Content-Type HTTP 标头是否为“application/json”，因此它将防止 CSRF 攻击（除非您安装了 Flash Player：https: //www.geekboy.ninja/blog/exploiting-json-cross -site-request-forgery-csrf-using-flash/）。更好的安全性是使用真实性令牌，即使数据类型不是 JSON，这也将保护 HTTP 请求。否则，也可以在会话 ID cookie 上使用 sameSite 属性来防止 CSRF ( https://www.owasp.org/index.php/SameSite)。
回答by Sangram Singh
Using Ajax request makes life much easier.
使用 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);
}
});
The above works perfectly.
以上工作完美。
