点击按钮发送请求时，Network面板显示调用两次接口——第一次是 OPTIONS 请求，第二次是实际的请求

我的场景： 

在点击一个按钮进行发送请求后，查看Network显示这个接口调用了两次，第一次是Request Method:为“OPTIONS”，第二次为正确请求。

 

为什么会出现这种情况： 

当您在前端页面中发送跨域请求时，浏览器会先发送一个 OPTIONS 请求进行预检，以确定服务器是否允许实际的请求。这个 OPTIONS 请求是浏览器自动发起的，用于检查跨域请求是否安全。如果服务器允许跨域请求，浏览器会继续发送实际的请求。

在 Network 面板中看到两次请求，第一次是 OPTIONS 请求，第二次是实际的请求。OPTIONS 请求通常包含一些预检请求头，如 Origin、Access-Control-Request-Method、Access-Control-Request-Headers 等，用于询问服务器是否允许跨域请求。

如果您希望减少 OPTIONS 请求，可以在服务器端配置 CORS，确保服务器正确响应预检请求。您可以在服务器端设置响应头，包括 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等，以明确指定允许的跨域请求。这样可以避免浏览器发送 OPTIONS 请求，直接发送实际的请求。

OPTIONS会不会有性能影响: 

OPTIONS 请求通常不会对性能产生显著影响，因为它是浏览器自动发起的预检请求，用于确保跨域请求的安全性。虽然 OPTIONS 请求会增加网络通信的开销，但通常情况下这种开销是可以接受的。

如果您发现 OPTIONS 请求频繁发生且对性能产生了影响，可以考虑在服务器端进行优化，确保正确配置 CORS 头信息，避免不必要的预检请求。您可以在服务器端设置合适的 CORS 头，明确指定允许的跨域请求，以减少 OPTIONS 请求的频率。

总的来说，正确配置 CORS 并处理预检请求是保障跨域请求安全的重要步骤，对于大多数应用来说，这种开销是值得的，不会对性能产生严重影响。