Vue中axios跨域预检请求导致的两次接口调用详解

在Vue中使用axios进行跨域交互时，可能会遇到接口被调用两次的情况。这种现象与CORS（Cross-Origin Resource Sharing，跨域资源共享）机制有关。浏览器为了确保安全，会在发送实际的HTTP请求前，先发送一个OPTIONS请求（也称为预检请求）。预检请求的主要目的是验证目标服务器是否允许来自特定源（即当前Vue应用的域名）的请求，并确定请求方法（如GET、POST等）以及自定义请求头。 当你设置axios的Content-Type为"application/json;charset=utf-8"，并且包含自定义请求头时，浏览器会额外发送一个OPTIONS请求。这个OPTIONS请求包含了请求的方法（例如PUT或DELETE）、自定义头信息等，以便服务器能够评估这些信息是否符合其CORS策略。如果服务器确认这些信息是允许的，它会返回一个带有特定响应头（如Access-Control-Allow-Methods、Access-Control-Allow-Headers等）的200状态码，表明后续的请求可以执行。 然而，这并不意味着实际的数据请求会被发送两次。第一次的OPTIONS请求只是一种确认机制，不会包含实际的数据传输。一旦服务器确认了请求的合法性，浏览器会使用收到的预检请求的响应信息，然后发送真正的数据请求（通常是POST、GET等），并携带与预检请求相同的头部信息。如果预检请求被拒绝，浏览器通常会抛出错误，阻止后续操作。 需要注意的是，尽管这种额外的预检请求看起来像是两个请求，但它并不会显著增加网络流量或对用户体验造成明显影响，因为预检请求通常很小，并且在服务器确认后会被缓存，后续相同类型的请求可以直接使用缓存结果，避免再次发送预检请求。 总结来说，在Vue中使用axios遇到的两次请求问题，实际上是为了处理跨域限制的正常行为，理解并适应这一机制有助于优化和调试跨域相关的API交互。