欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

axios optons请求的坑

程序员文章站 2022-03-04 23:50:10
...

出于安全考虑,并不是所有域名访问后端服务都可以。其实在正式跨域之前,浏览器会根据需要发起一次预检(也就是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
       // }]
   })

相关标签: axios