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

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

在Vue开发中使用axios进行跨域请求时，有时会遇到同一个接口请求两次的情况，且第一次请求总是options请求。这是由于浏览器的同源策略导致的。具体来说，当进行跨域请求时，浏览器会先发送一个options请求来检查目标服务器是否允许实际的请求（如GET或POST）。如果服务器响应允许，浏览器才会发送实际的请求。

例如：- options请求：检查服务器是否允许跨域请求- get请求：发送实际的GET请求- post请求：发送实际的POST请求

这种情况下，出现两次options请求的原因可能是：

1.代码中错误地重复发送了请求。

2.服务器配置不当，导致浏览器发送了两次options请求。

要解决这个问题，可以：

- 检查代码，确保没有重复发送请求。- 查看服务器配置，确保正确处理了CORS（跨源资源共享）请求。

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

如下图

options请求

get请求

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

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

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