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

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

在Vue开发中使用axios进行跨域请求时，有时会遇到同一个接口请求两次的情况，且第一次总是options请求。这是因为浏览器同源策略的限制。具体表现为：

- options请求：用于检查服务器是否支持CORS（跨源资源共享）。- post/get请求：实际的数据请求。

出现这种情况的原因是：

1. 第一次请求是浏览器的预检请求，用于检查服务器是否支持CORS。

2.如果服务器支持CORS，则后续的post/get请求可以正常进行。

3.如果服务器不支持CORS，则后续的请求会被拦截，导致请求两次。

解决方法：

1. 在服务器端设置CORS响应头，允许跨域请求。

2.使用代理服务器，将请求转发到目标服务器，绕过同源策略限制。

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

如下图

options请求

get请求

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

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

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