如何理解因防火墙而学习的Content-Type
如何理解因防火墙而学习的Content-Type，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
背景
项目在B学校上线的时候，同一个功能在A学校是没问题，B学校前端点击后，后端一直收不到请求
初步分析
1.确认一下代码都是同一份
2.确认是否访问了正确的服务器
3.确认应用服务器是否收到了请求
4.确认反向代理服务器是否收到了请求
5.抓包看请求是否发出（其实不用怀疑这一点）
以上四步做完之后的结论是：代码是同一份，服务器是对的，反向代理服务器和应用服务器都没有收到请求
初步诊断结果
怀疑是B学校的防火墙拦截了请求，因此可能有两个解决方案：
1.找学校开防火墙，设置白名单
2.想办法绕开防火墙规则
但是有人得问了，为什么防火墙会拦截喃，因为在我们异步提交的数据当中含有 等富文本标签，这应该是防火墙防止XSS攻击的而设置的策略，进而拦截了请求
因为当时事情紧急，且学校放假没人配合，只有先试着用第2点。
解决过程
之前没怎么接触过XSS攻击，对防火墙的拦截策略没什么多少认识，接下来试着在POSTMAN中使用mutipart/formdata提交测试，居然是成功的。
找到了突破口，然后就让前端更改默认提交请求头中的Content-Type=mutipart/formdata，然后在VUE中使用FormData构造表单提交
至此绕过了防火墙，上线OK
总结
不同学校的防火墙策略不一样，因此开发人员需要补充WEB安全相关的知识点，最好是公司的CTO在学习整理之后，公司针对特定行业现状弄出一套最佳实践出来
通过本次实践，顺便了解了一下Content-Type分别为multipart/formdata和x-www-form-urlencode的请求信息
x-www-form-urlencode
默认情况下，html的form表单的enctype=application/x-www-form-urlencoded。一些框架比如Jquery Vue的Ajax提交默认也是这种类型
application/x-www-form-urlencoded是指表单的提交，并且将提交的数据进行urlencode。默认情况下，我们所有的表单提交都是通过这种默认的方式实现的，如图：
可以看到中文被编码了,但是它并不会把特殊字符进行编码,比如< &等。这样可能会导致XSS-存储型攻击或者SQL注入攻击。因此防火墙拦截它是正确的。因此写前端代码的时候，输入都需要做校验，比如电子邮箱，生日、年龄、文本使用地方的XSS FILTER做过滤等，同时后端也要做校验，因为前端是很容易就绕过的。关于XSS-攻击可以去看阿里-首席安全架构师-吴翰清的《白帽子讲WEB安全》一书
multipart/form-data
我们如果要在表单中上传文件，一般会将form的enctype参数设置为multipart/form-data，一些框架比如Jquery Vue的Ajax提交也可以设置Content-Type，这种方式只支持POST的请求方式
Contype-Type=multipart/form-data情况的时候，都会通过一个特殊的字符串来将原始POST数据进行分割。
我们可以看到下面的请求中Content-type的类型
分隔符开始为：----WebKitFormBoundaryM2jFeC5L7hYjAqxZ
分隔符结束为：-----WebKitFormBoundaryM2jFeC5L7hYjAqxZ--
相比较多了"--"
通过这种方式我们把富文本提交到了后端，写入了数据库。但是为了避免XSS攻击，前端和后端代码都可以使用第三方的插件扫描一下文件内容或者VALUE值
application/json
是我们将json字符串通过请求体(http body)向后端提交数据，springmvc后端直接使用@requestBody进行接收，这也是经常使用一种方式，并没有什么特别的点。同样需要对参数内容进行过滤，防止XSS攻击。
VUE防XSS攻击
vue前端框架提供了防XSS攻击的方法，可以自行网上查阅
看完上述内容，你们掌握如何理解因防火墙而学习的Content-Type的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注行业资讯频道，感谢各位的阅读！
