在前端开发中，我们经常会遇到需要向后端发送请求以获取数据或者执行某些操作的场景。而浏览器为了保护用户安全，会在一些情况下弹出验证对话框，例如在发送 AJAX 请求时如果跨域或者使用了不受支持的 HTTP 方法等。
但是，有时候我们希望避免这些对话框的出现，比如在自动化测试或者集成开发环境中，这些对话框会干扰我们的工作流程。那么，我们该怎样才能抑制浏览器的验证对话框呢？
方案一：调整请求方式和跨域设置
第一个方案是通过调整请求方式和跨域设置来避免浏览器的验证对话框。具体地说，我们可以尝试以下两种方法：
- 使用支持的请求方式：浏览器默认支持 GET 和 POST 请求，其他请求方式（例如 PUT、DELETE 等）可能会触发验证对话框。因此，我们可以尝试改用 GET 或 POST 请求进行通信，避免触发验证对话框。
- 调整跨域设置：如果我们需要跨域访问其他站点的资源，那么可以通过 CORS（Cross-Origin Resource Sharing）机制来实现。在服务端设置响应头，允许其他站点的请求访问资源，这样就可以避免跨域引起的验证对话框。
这些方法虽然简单易行，但是需要依赖具体的业务场景和后端实现，可能并不适用于所有情况。接下来，我们将介绍更加通用和灵活的解决方案。
方案二：使用 XMLHTTPRequest 对象
XMLHTTPRequest（XHR）是浏览器内置的 HTTP 请求对象，通过它可以发送 AJAX 请求。相比于使用 Fetch API 或者 jQuery 等第三方库，使用 XHR 可以更加灵活地控制请求和响应，从而避免浏览器的验证对话框。
以下是一个使用 XHR 发送 POST 请求的示例代码：
----- --- - --- -----------------
---------------- --------
------------------------------------ --------------------
---------------------- - ---------- -
-- --------------- --- -- -
------------------------------
-
--
------------------------- ----- ------- ---- -- ----在上面的代码中，我们通过 xhr.open 方法指定请求方式和地址，通过 xhr.setRequestHeader 方法设置请求头，通过 xhr.onreadystatechange 属性监听响应状态变化，最后通过 xhr.send 方法发送请求数据。
需要注意的是，如果我们要发送跨域请求，还需要在服务端设置响应头，允许其他站点的请求访问资源。具体的设置方法可以参考 MDN 文档。
方案三：使用 fetch API
Fetch API 是 ES6 新增的 HTTP 请求库，它提供了一组灵活且易于使用的接口，可以取代 XHR 和第三方库。与 XHR 不同，fetch API 默认不会触发浏览器的验证对话框，因此可以直接使用。
以下是一个使用 fetch API 发送 POST 请求的示例代码：
------------- - ------- ------- -------- - --------------- ------------------ -- ----- ---------------- ----- ------- ---- -- -- -- -------------- -- ---------------- ---------- -- -------------------
在上面的代码中，我们通过 fetch 方法指定请求方式和地址，通过 headers 属性设置请求头，通过
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12777