个人中心
gpt4 book ai didi

javascript - 如何检测 Javascript 中 XMLHttpRequest() 的跨源 (CORS) 错误与其他类型的错误

转载 作者：IT王子 更新时间：2023-10-29 03:00:30 24 4
gpt4 key购买 nike

我正在尝试检测 XMLHttpRequest() 何时因跨源错误而不是错误请求而失败。例如:

    ajaxObj=new XMLHttpRequest()
    ajaxObj.open("GET", url, true); 
    ajaxObj.send(null);

考虑 url 的 4 种情况:

情况 1:url 是正确设置 access-control-allow-origin 的有效地址

  • 示例:http://192.168.8.35 我的服务器在 header 中设置了 Access-Control-Allow-Origin: *
  • 这很容易检测为 ajaxObj.readyState==4 和 ajaxObj.status==200

情况 2:url 是现有服务器上的无效地址

  • 示例:http://xyz.google.com 服务器响应但不是有效请求
  • 这导致 ajaxObj.readyState==4 和 ajaxObj.status==0

情况 3: url 指向一个不存在的服务器 ip 地址

  • 示例:http://192.168.8.6 在我的本地网络上没有任何响应
  • 这导致 ajaxObj.readyState==4 和 ajaxObj.status==0

情况 4: url 是一个有效地址，其中 access-control-allow-origin NOT set

  • 示例:http://192.168.8.247 我有一个服务器 没有 Access-Control-Allow-Origin: * 设置标题
  • 这导致 ajaxObj.readyState==4 和 ajaxObj.status==0

问题是:如何区分情况 4(访问控制允许来源错误)和情况 2 和 3？

在案例 4 中，Chrome 调试控制台显示错误:

XMLHttpRequest 无法加载 http://192.168.8.247/。 Access-Control-Allow-Origin 不允许来源 http://localhost。

如何在 Javascript 中告知该错误？

我试图在 ajaxObj 中找到一些指示，但与案例 2 和 3 相比似乎没有什么不同。

这是我使用的一个简单测试:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CORS Test</title>
<script type="text/javascript">
function PgBoot()
{
//  doCORS("http://192.168.8.35");   // Case 1
//  doCORS("http://xyz.google.com"); // Case 2
    doCORS("http://192.168.8.6");    // Case 3
//  doCORS("http://192.168.8.247");  // Case 4
}

function doCORS(url)
{
    document.getElementById("statusDiv").innerHTML+="Processing url="+url+"<br>";
    var ajaxObj=new XMLHttpRequest();
    ajaxObj.overrideMimeType('text/xml');
    ajaxObj.onreadystatechange = function()
    {
        var stat=document.getElementById("statusDiv");
        stat.innerHTML+="readyState="+ajaxObj.readyState;
        if(ajaxObj.readyState==4)
            stat.innerHTML+=", status="+ajaxObj.status;
        stat.innerHTML+="<br>";
    }
    ajaxObj.open("GET", url, true); 
    ajaxObj.send(null);
}
</script>
</head>
<body onload="PgBoot()">
<div id="statusDiv"></div>
</body>
</html>

使用 Chrome 的结果:

Processing url=http://192.168.8.35
readyState=1
readyState=2
readyState=3
readyState=4, status=200
Processing url=http://xyz.google.com
readyState=1
readyState=4, status=0
Processing url=http://192.168.8.6
readyState=1
readyState=4, status=0
Processing url=http://192.168.8.247
readyState=1
readyState=4, status=0

最佳答案

不，根据 W3C 规范，没有办法区分它们。

下面是 CORS 规范如何指定 simple cross-origin request程序:

Apply the make a request steps and observe the request rules below while making the request.

If the manual redirect flag is unset and the response has an HTTP status code of 301, 302, 303, 307, or 308: Apply the redirect steps.

If the end user cancels the request: Apply the abort steps.

If there is a network error: In case of DNS errors, TLS negotiation failure, or other type of network errors, apply the network error steps. Do not request any kind of end user interaction...

Otherwise: Perform a resource sharing check. If it returns fail, apply the network error steps...

在网络连接失败或 CORS 交换失败的情况下，network error steps被应用，所以实际上没有办法区分这两种情况。

为什么？一个好处是它可以防止攻击者检查 LAN 的网络拓扑。例如，恶意网页脚本可以通过请求其 HTTP 接口(interface)找到路由器的 IP 地址，从而了解有关网络拓扑的一些信息(例如，您的私有(private) IP block 有多大，/8 或 /16)。由于您的路由器不会(或不应)发送 CORS header ，因此该脚本绝对不会学到任何东西。

关于javascript - 如何检测 Javascript 中 XMLHttpRequest() 的跨源 (CORS) 错误与其他类型的错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19325314/

24 4 0
文章推荐： javascript - HTML5 中的 Shared Worker 和 Worker 有什么区别？
文章推荐： c# - 使用 XmlDocument C# 在 xml 中添加根元素
文章推荐： java - BottomNavigationView 后退按钮无法正常工作
文章推荐： javascript - Object.assign 与 $.extend
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com