前端最基础的就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。axios在日常使用上不如$.ajax，但是我之前用的时候不是改了入参就是改了方法，反正解决了。我也知道问题出在content-type上。就是想不起来了，前几天在后台项目上线了一个新的服务。我之前用的build开发工具用的是proxyagent。不知道有没有人用过。几年前刚开发的时候没有更新，现在还有bug。直接改了axios代理，然后就报错了。嗯，我的锅，我会认真总结的，保证不会忘记。你今天在说什么？什么是内容类型？MIME对照表为什么axios感觉不如$.ajax给大家展示如何正确打开axios？什么是内容类型？Content-Type实体头用于指示资源的MIMEtype媒体类型。在响应中，它用于描述服务器实际发送给客户端的数据类型。在请求中，比如POST请求，是指客户端实际发送给服务器的数据类型。双方根据这个值，选择合适的方式来解析数据。MIME类型由type/subtype组成，如application/json、text/html、text/plain，不区分大小写，但习惯用小写书写。内容类型组合内容类型：媒体类型；字符集，例如Content-Type:text/html；charset=utf-8formapplication上传文件时，默认情况下，为什么要上传文件就不能使用第二个呢？带着你的问题回头看看。MIME比较表MediaTypes-完整比较表MIME分类类型关键字描述示例文本文本。常见于复制粘贴。text/htmlhtml页面，text/csscss文件，text/plain普通文本（默认格式）image图片。input.files[0].type用于判断返回时的类型。inputaccept="image/*"允许选择所有图像文件image/pngpngimage,image/jpegjpgimageaudioaudio。同上音频/wav、音频/mpegmp3文件视频视频。同上video/mp4MP4fileapplicationbinarydataapplication/octet-streamgeneraltype(defaultformat),application/pdfmultipartcompositetypemultipart/form-datacommonMIMEkeydescriptionapplication/octet-stream默认值，或者可以理解为一个未知的申请文件。浏览器将此类文件视为HTTP标头Content-Disposition设置为附件的文件。（微信下载文件）text/html可以理解为html、xml文件。text/plain的默认值也可以理解为未知格式的文本文件。至于文本文件，只读单词问题不大，图片判断multipart/byteranges时，用于将部分响应报文回传给浏览器。常见请求视频资源返回206状态码application/jsonJSON格式multipart/form-data用于表单提交和文件上传。作为多部分文档格式，单独的部分由边界（以“--”开头的字符串）划分。每个部分都有自己的实体，以及自己的HTTP请求标头、Content-Disposition和Content-Type。application/x-www-form-urlencoded用于正常的get&post请求。数据被编码为键/值对。(a=1&b=2)这是标准的编码格式。为什么axios感觉不如$.ajax（同样的代码jquery好用，axios不好用，axios有bug）——这个应该是吐槽我最多的吧。测试地址axios和$.ajax的设计思路，或者历史场景jquery都很好。解决了浏览器版本不一致的问题，提供了统一的API，大大简化了我们的操作。axios拥抱现代浏览器，提供跨平台（Node发送请求），Promise等get请求get请求就不多说了。请求的参数会写在url上，比如https://www.lilnong.top/CORS/lnong?a=1&b=2，其中a=1&b=2是过去的参数，也用在两个，我们会发现axios并没有带过去的参数。这时候兄弟们就开始说我写了为什么传不下去了。垃圾垃圾。兄弟们把上面的问题都骂完了，还是要解决问题。手工拼写，老哥也是虎头蛇尾，可以使用qs、$.param({a:1,b:2})等类库解决处理问题，然后手动拼接正确答案（axios使用params发送获取数据）post请求对于post请求，有几种情况。application/x-www-form-urlencoded这种情况相当于在requestbody中存放了get方法的参数。编译格式完全一样。application/json请求体是以下JSON字符串{a:1,b:2}multipart/form-data请求体是这个块的结构。好吧，那我们看看兄弟们为什么抱怨。同样，我的ajax是怎么工作的，axios****data不行，我们改一下params，嗯，这里其实有两种情况，后台大哥说收到了，嗯，结论是帖子也是过几天出来一个params另一个后台大哥说收不到。奇怪的是，我又开始拉头发了。这就是它有时有效有时无效的原因。首先params传递的参数会拼写在url上。如果严格按照规定去做，他是拿不到尸体的信息的。如果url构造一次，body被覆盖一次，不按规定，就会导致获取不到。有些人更聪明，发现更改参数效果不佳。突然在官网上找到一个例子，就试试看。后台大哥怎么还是收不到？其实这里的content-type已经改成application/json了。一般来说，旧的后台是不会适配这种格式的。axios({method:'post'})也是这种格式。有什么办法吗？好吧，他们又开始缝合自己了。好吧，这次我搞混了transformRequest方法。以我的方式，我会替他处理。FormData方法好，识别准确，算是正确的表单提交。URLSearchParams方案相当于Qs类库，但浏览器支持。当然，兼容性不是很好。让你了解axios的正确打开方式。使用get发送带有参数的请求。使用post使用数据发送请求。默认为application/json格式，可以通过FormData修改。建议全局transformRequest解决方案axios支持Promiseaxios.get('/user?ID=12345').then(function(response){console.log(response);}).catch(function(error){console.日志（错误）；}）；axios支持Node环境配置默认值，选项1比较过瘾，可以添加一些常用的header。全局axios默认值axios.defaults.headers.common['Authorization']=AUTH_TOKEN;Instancedefaultvalue//设置创建实例时配置的默认值varinstance=axios.create({baseURL:'https://api.example.com'});//创建实例后修改默认值instance.defaults.headers.common['Authorization']=AUTH_TOKEN;拦截器，它可以拦截错误并报告错误。或者打印日志。//添加响应拦截器axios.interceptors.response.use(function(response){//使用响应数据做一些事情returnresponse;},function(error){//使用响应错误做一些事情returnPromise.reject(错误）;}）;综上所述，内容类型非常重要。在req中，它告诉服务器使用什么格式来解析数据。在rsp中，它告诉浏览器如何解析数据。根据对应的类型，可以正确发送和接收对应的格式。参考MIME类型--MDNaxios--看云
