Vue axios请求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请求：



真实请求：