如何优雅处理Vue项目中Axios的跨域OPTIONS预检请求问题？

本文共计1060个文字，预计阅读时间需要5分钟。

在Vue开发中使用axios进行跨域请求时，有时会遇到同一个接口请求两次，且第一次是options请求的情况。例如，options请求 + get请求。以下是可能的原因：

1. 浏览器同源策略：浏览器出于安全考虑，默认不允许跨域请求。当请求跨域时，浏览器会先发送一个options请求，询问服务器是否允许进行后续的请求。

2.CORS配置：服务器可能没有正确配置CORS（跨源资源共享）策略，导致浏览器无法识别允许的请求类型。

3.代理配置：如果使用代理，代理服务器可能没有正确处理options请求。

解决方法：

- 确保服务器正确配置了CORS策略。- 检查代理配置，确保代理服务器正确处理options请求。

我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求

如下图

options请求

get请求

为什么会出现这种原因呢？

这是因为CORS跨域分为 简单跨域请求和复杂跨域请求；

简单跨域不会发送options请求，复杂跨域会发送一个预检请求options。