前后端联调的'暗语'出入——axios的content-type设置

1,238 阅读1分钟

情景一:

后端:以json进行传输,放在Body里面(body传参)。

前端:

  1. json传输一般意味着后端预期我们request的content-type设置为application/json。 企业微信截图_5f2ebd81-709b-4f06-9fff-5a051692d5fe.png

  2. body传参,后端使用req.body进行获取。在chrome调试工具看到的效果,对应的Request Payload里面的参数 image.png

情景二:

后端:要用post请求,parameter形式传参

前端: parameter传参还分两种

  1. 第一种就是像get一样的,参数放在url后面,后端使用req.query进行获取。比如: image.png 对应到network上就是这里的Query String Parameters里面的参数 image.png

  2. 第二种就是request-header里面的content-type为

  • multipart/form-data
  • application/x-www-form-urlencoded 后端也是用req.query获取参数,对应到Form Data一栏: image.png

预检请求

预检请求,比较常见的情况就是我们在axios自己设置content-type的时候,设置的不是以下三种:

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded 比如我们情景一的application/json,那这个时候,浏览器会首先发一个options预检请求,只有预检请求通过了,才会继续发送我们的真实请求。

但是,如果后端的Access-Control-Allow-Methods没有包含OPTIONS,那么就会出现CORS跨域报错。

举例一种后端设置方式:

image.png