Vue axios请求PUT/DELETE请求变OPTIONS
问题:vue项目中使用axios请求,在使用get请求时没问题,在测试PUT/DELETE时出现请求类型变成OPTIONS的情况。
   ·  
 问题:
vue项目中使用axios请求,在使用get请求时没问题,在测试PUT/DELETE时出现请求类型变成OPTIONS的情况。 
  如下请求在axios上稍作封装,原生axios相同。
请求方法:
      deleteF: (val) => {
        let options = {
          method: 'delete',
          success: (data) => {
            console.log(data)
          },
          error: (error) => {
            console.log(error)
          }
        }
        axiosAjax('/frontend/cmdb/host/delete/' + val, '', options)
      }页面发送的网络请求:  
  在此,请求方式发生变化
分析:
这里有个前提没有提前说,不过如果你遇到这个问题,说明这个前提你应该是满足的,就是在跨域请求的会出现这个问题。
非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为”预检”请求(preflight),在post,put,delete发送之前发送一个 OPTIONS 请求,以判断服务端是否允许这一域访问. 
  所以这是一个正常的机制。 
  这个机制下产生的现象是在触发一次功能是会产生两个请求,一个OPTIONS”预检”请求,一个后续的正式请求。在OPTIONS请求成功后才会发送后续的请求。
解决:
因为后台已经做了允许跨域, 在明白上述过程后,我使用的解决方式是在接口遇到OPTIONS请求时不做处理直接返回,则后续真实请求就可以请求到。
在生产部署时,前后端部署在同一环境,这个问题自然就不存在了!
OPTIONS请求: 
真实请求: 
更多推荐
 
 



所有评论(0)