axios optons请求的坑
出于安全考虑,并不是所有域名访问后端服务都可以。其实在正式跨域之前,浏览器会根据需要发起一次预检(也就是option请求),用来让服务端返回允许的方法(如get、post),被跨域访问的Origin(来源或者域),还有是否需要Credentials(认证信息)等。那么浏览器在什么情况下能预检呢?
两种请求方式
浏览器将CORS请求分为两类:简单请求(simple request)和非简单请求(not-simple-request),简单请求浏览器不会预检,而非简单请求会预检。
延伸:
post提交数据的四种编码方式
1.application/x-www-form-urlencoded
这应该是最常见的post编码方式,一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。在PHP中,可以用$_POST[“key”]的方式获取到key的值。
2.multipart/form-data
这也是一种比较常见的post数据格式,我们用表单上传文件时,必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data。
3.application/json
axios默认提交就是使用这种格式。如果使用这种编码方式,那么传递到后台的将是序列化后的json字符。
4.text/xml 串。
这两种方式怎么区分?
同时满足下列三大条件,就属于简单请求,否则属于非简单请求
1.请求方式只能是:GET、POST、HEAD
2.HTTP请求头限制这几种字段:Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID
3.Content-type只能取:application/x-www-form-urlencoded、multipart/form-data、text/plain
axios post方法Content-type默认使用application/json格式编码数据,属于非简单请求,将axios post方法的编码格式修改为‘application/x-www-form-urlencoded; charset=UTF-8’,修改Content-type:
headers:{
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
会出现传输数据不一致,可在数据发送前修改发送数据(transformRequest)或者使用qs依赖:
import axios from 'axios'
//qs依赖
import qs from 'qs'
axios
({
headers:{
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
baseURL: 'https://api.xiepinhui.com.cn',
url: '/website/leave_message',
method: 'post',
//qs依赖转换数据
data: qs.stringify(data)
//transformRequest(axios自带的属性)
// transformRequest: [function (data) {
// console.log(data)
// let ret = ''
// for (let it in data) {
// ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
// }
// return ret
// }]
})
上一篇: Python: 语法(持续更新)