在HTML中使用jQuery发送JSON数据
Post JSON data using jquery in html
根据MDN的文档,预检请求是为了确定实际请求是否安全而首先向另一个域的资源发送一个HTTP OPTIONS请求头。由于跨站请求可能对用户数据产生影响,因此会进行预检。特别地,如果请求满足以下条件,则会进行预检:
- 使用除GET或POST之外的方法。如果使用POST方法发送的请求数据的Content-Type不是application/x-www-form-urlencoded、multipart/form-data或text/plain,例如使用application/xml或text/xml将XML负载发送到服务器,则会进行预检。
- 在请求中设置自定义头(例如,请求使用X-PINGOTHER等头)。
根据这段文档的描述,将"application/json"更改为"text/plain"解决了问题,停止了恶心的options请求。但是我不明白为什么浏览器会使用OPTIONS方法来检查实际请求是否安全。在什么情况下?我的意思是服务器也可以通过某些响应头设置限制,为什么还需要这个?
请记住,通过添加CORS,您可能会接受来自任何人的请求,他们可以通过请求(POST、PUT、DELETE等)在您的服务器上操纵数据。在这些情况下,例如在使用自定义头时,浏览器只是首先与服务器检查服务器是否愿意接受请求,然后再发送请求。因为向服务器发送未经请求的请求可能对您的数据非常危险,而且如果服务器不想接受潜在的大负载,浏览器发送这些负载有何意义,所以需要预检OPTIONS检查。
如果将数据发送到服务器可能是危险的,也就是说服务器可能会被入侵,那么恶意服务器当然会对您的OPTIONS请求回应"当然,请全部发送过来!"这就是安全性在哪里?(真诚的问题)
预检请求并不是一个安全性问题,而是一个不改变规则的问题。- 请参见What is the Motivation Behind Introducing Preflight Requests中的答案。
如何在不发送OPTIONS请求的情况下发送包含令牌的自定义头X-Authentication?
您可以在代码中检查OPTIONS(在其他规则之上)并返回200响应。
整个CORS规范很奇怪:如果主要API的开发人员将自定义头移到URL作为查询参数,那么禁止自定义头的意义何在?该规范与现实不太相符,或者反之亦然。
预检用于验证服务器是否预期接收"非标准"的跨域请求。XHR(ajax)查询可以发送浏览器无法发送的请求(例如PUT、DELETE)。CORS旨在防止使用第三方网站上的访问者的浏览器对您的服务器进行间接攻击。
在这段代码中,问题的出现是在使用jQuery在HTML中POST JSON数据时。原因是在发送数据之前,需要使用JSON.stringify将表单数据转换成JSON字符串,并以"text/plain"的形式发送。
解决方法是在表单提交函数postMyFormData()中,首先使用serializeArray()方法将表单数据序列化为数组,然后使用reduce()方法将数组转换为对象。接下来,使用JSON.stringify()方法将对象转换为JSON字符串,并将其作为数据发送。最后,使用$.ajax()函数发送POST请求,并设置dataType为"text",contentType为"text/plain"。
通过以上的操作,就可以成功地使用jQuery在HTML中POST JSON数据了。
以下是整理后的文章:
如果你想要在HTML中使用jQuery来POST数据,需要确保使用JSON.stringify方法将表单数据转换为JSON字符串,并以text/plain的形式发送。
在上述的代码中,我们可以看到一个表单和一个表单提交函数postMyFormData。在表单中,我们有一些输入字段和一个提交按钮。当点击提交按钮时,会触发postMyFormData函数。
在postMyFormData函数中,我们首先使用serializeArray方法将表单数据序列化为数组。然后,我们使用reduce方法将数组转换为一个对象,其中数组的name作为对象的属性,value作为属性值。接下来,我们使用JSON.stringify方法将对象转换为JSON字符串,并将其作为数据发送。
最后,我们使用$.ajax函数发送POST请求。在ajax函数中,我们设置了请求的类型为"POST",URL为"https://website.com/path",数据为我们刚刚转换的JSON字符串。我们还设置了请求的dataType为"text",contentType为"text/plain"。
通过以上的操作,我们可以成功地使用jQuery在HTML中POST JSON数据了。