摘要：前端最基础的就是。数据被编码为键值对。大法好，精准识别，也算是正确的表单提交。全局的默认值实例默认值创建实例时设置配置的默认值在实例已创建后修改默认值拦截器，可以拦截错误，进行上报。参考资料类型看云
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
axios 日常使用上，感觉不如 $.ajax 但是我之前使用的时候不是改入参就是改方法反正是都解决了。
我也知道问题出在 content-type 上。
就是记不住，这不前几天后台项目起了个新的服务。
之前用的构建开发工具用的是 proxy 代理，不知道有老哥用过没，好几年前初次开发的时候就不更新了，还有 bug。
索性换 axios 代理一下吧，然后报错了。好吧，我的锅，我认真总结，保证我不忘了。
content-type 是什么
MIME 对照表
axios 为什么感觉不如 $.ajax
带你领略 axios 正确打开方式
content-type 是什么Content-Type 实体头部用于指示资源的 MIME类型 media type 。
在响应中，用来描述服务端实际发送给客户端的数据的类型。
在请求中，比如 POST请求，是指客户端给服务器实际发送的数据的类型。
双方根据这个值，来选择适合的方式解析数据。
type/subtype，如application/json、text/html、text/plain
对大小写不敏感，但是习惯写小写。
Content-Type:media-type; charset，如Content-Type: text/html; charset=utf-8
表单中的应用 想上传文件的时候
默认
为什么想上传文件不能用第二个呢？带着你的问题往后看吧
Media Types -全量的对照表
MIME 分类| type关键词 | 描述 | 示例 |
| text | 文本。复制粘贴的里面常见。 | text/html html页面, text/css css文件,text/plain 通用文字（默认格式） |
| image | 图片。input.files[0].type 返回的时候用于判断类型。input accept="image/*" 允许选择所有图片文件 | image/png png图片, image/jpeg jpg图片 |
| audio | 音频。同上 | audio/wav,audio/mpeg mp3文件 |
| video | 视频。同上 | video/mp4 MP4文件 |
| application | 二进制数据 | application/octet-stream 通用类型（默认格式），application/pdf |
| multipart | 复合类型 | multipart/form-data |
| key | 描述 |
| application/octet-stream | 默认值，或者可以理解为未知的应用程序文件。浏览器会像对待设置了 HTTP 头 Content-Disposition 值为 attachment 的文件一样来对待这类文件。（微信下载文件） |
| text/html | 可以理解为 html、xml 文件。 |
| text/plain | 默认值，也可以理解为未知格式的文本文件。文本文件嘛，没格式就只看字也不是啥大问题 |
| image/png | 常见图片类型，一般上传图片的时候判断 |
| image/jpeg | 常见图片类型，一般上传图片的时候判断 |
| image/gif | 常见图片类型，一般上传图片的时候判断 |
| multipart/byteranges | 用于把部分的响应报文发送回浏览器。常见于请求视频资源返回206状态码 |
| application/json | JSON 格式 |
| multipart/form-data | 用于带文件上传的表单提交。作为多部分文档格式，由边界线（一个由"--"开始的字符串）划分出的不同部分组成。每一部分有自己的实体，以及自己的 HTTP 请求头，Content-Disposition 和 Content-Type。 |
| application/x-www-form-urlencoded | 普通的 get&post 请求。数据被编码为键/值对。(a=1&b=2)这是标准的编码格式。 |
（同样代码 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 来发送 get 的数据的）
对于 post 请求来说就有好几种情况了
application/x-www-form-urlencoded 这种情况等于把 get 方式的参数拿到 请求体中存放。编译格式是一模一样的。
application/json 请求体中就是如下的JSON字符串{a:1,b:2}
multipart/form-data 请求体中就是这种块的结构。
好，那我们接着看兄弟们为什么要吐槽。同样，我 ajax 怎么好使，axios ****
data 不行，我们换 params，嗯这里其实分为两个情况
后台大哥说收到了，嗯，post 也是 params的结论就出来了
过几天另一个后台大哥说收不到。很奇怪，又开始揪头发。
这里说一下为什么有的时候能收到，有的时候不行。首先 params 带过去的参数会拼写在 url 上。如果严格来按规定做的话，他就是拿body 的信息就导致拿不到。不按规定来，url的构建一次，body的覆盖一次，就导致拿到了。
有的人比较机灵，换 params 发现不怎么好使，突然发现官网的例子，我来试一试。后台大哥怎么还收不到？这里其实 content-type 被改成了 application/json。一般来说老后台都不会适配这种格式。axios({method:"post"}) 也是这种格式
没办法了？嗯，他们又开始自己拼接。嗯，这次有混过去了
transformRequest 大法，我这个方法里面，给他处理一番。
FormData 大法好，精准识别，也算是正确的表单提交。
URLSearchParams 方案等同于 Qs 的类库，只不过是浏览器支持的，当然兼容性也不怎么样
使用 get 要用 params 来发送请求
使用 post 要用 data 来发送请求
默认为 application/json 格式
可以通过 FormData 来进行修改
更建议全局 transformRequest 的方案
axios 支持 Promise
axios.get("/user?ID=12345")
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios 支持 Node 环境
配置默认值，方案1更痛快，可以增加一些通用的 headers。
全局的 axios 默认值
axios.defaults.headers.common["Authorization"] = AUTH_TOKEN;
实例默认值
// 创建实例时设置配置的默认值
var instance = axios.create({
baseURL: "https://api.example.com"
});
// 在实例已创建后修改默认值
instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;
拦截器，可以拦截错误，进行上报。或者打印日志。
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
总结
content-type 很重要，在 req 中是告知服务器应该用什么样的格式去解析数据，rsp 中是让浏览器端去如何解析数据。
根据对应的类型，传对应的格式，才可以正确的收发。
MIME 类型 --MDN
axios --看云
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104366.html
摘要：前端最基础的就是。数据被编码为键值对。大法好，精准识别，也算是正确的表单提交。全局的默认值实例默认值创建实例时设置配置的默认值在实例已创建后修改默认值拦截器，可以拦截错误，进行上报。参考资料类型看云 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水...
摘要：前端最基础的就是。一个朋友的问题，监测下载进度。这节主要是讲如何使用，以及前端下载的核心操作。下载文件，并显示进度条。下载文件，并显示进度条下载文件上面已经实现了，那我们先说说如何显示进度条。实现代码如下，我们操作成读流，然后统计长度。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（H...
摘要：前端最基础的就是。一个朋友的问题，监测下载进度。这节主要是讲如何使用，以及前端下载的核心操作。下载文件，并显示进度条。下载文件，并显示进度条下载文件上面已经实现了，那我们先说说如何显示进度条。实现代码如下，我们操作成读流，然后统计长度。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（H...
阅读 2026·2019-08-30 15:52
阅读 2389·2019-08-29 18:37
阅读 769·2019-08-29 12:33
阅读 2811·2019-08-29 11:04
阅读 1495·2019-08-27 10:57
阅读 2065·2019-08-26 13:38
阅读 2738·2019-08-26 12:25
阅读 2408·2019-08-26 12:23
