为何XMLHttpRequest在部分网站可用部分不可用？遇NetworkError问题

为什么请求谷歌网站会失败？ #

这是浏览器同源策略和CORS（跨源资源共享）机制共同作用的结果：

• 浏览器的同源策略是基础安全限制，默认禁止脚本从当前域名（比如本地打开的HTML页面，域名为file://或localhost）请求其他域名的资源。
• jsonplaceholder.typicode.com能正常响应，是因为它的服务器主动配置了CORS响应头（例如Access-Control-Allow-Origin: *），明确允许任意外部域名的脚本请求其资源。
• 谷歌的服务器没有配置允许你当前域名的CORS响应头，浏览器检测到这一情况后，会直接拦截请求的响应，并对外抛出模糊的NetworkError——实际上网络连接是成功的，只是浏览器出于安全规则屏蔽了响应内容。

如何获取更准确的错误信息？ #

针对这类XHR请求错误，可通过以下方式获取精准排查信息：

• 绑定XHR错误事件读取状态细节：
  给XMLHttpRequest添加error事件监听，通过status和statusText属性获取状态信息，同时提示查看控制台的详细错误：

  const req = new XMLHttpRequest();
  req.open("GET", "https://www.google.com/", true); // 建议改用异步模式
  req.addEventListener('error', () => {
    console.log(`错误状态码: ${req.status}, 描述: ${req.statusText}`);
    console.log('请查看浏览器控制台「网络」面板获取CORS详细错误');
  });
  req.addEventListener('load', () => {
    console.log(`响应状态: ${req.status}`);
  });
  req.send();
  

• 查看浏览器开发者工具：
  按下F12打开开发者工具，切换到「网络」标签后重新发起请求。你会看到请求实际已成功到达谷歌服务器（状态码通常为200），但浏览器会在「控制台」标签输出明确的CORS错误提示，例如No 'Access-Control-Allow-Origin' header is present on the requested resource.
• 放弃同步XHR：同步XHR会阻塞主线程，且错误捕获灵活性极低，改用异步模式配合回调/Promise，能更清晰地处理和排查错误。

为什么不同网站表现不同？ #

核心差异在于服务器配置的CORS响应头：

• 像jsonplaceholder这类公开API服务，为了方便开发者调用，会主动配置Access-Control-Allow-Origin允许跨域请求；
• 谷歌这类面向普通用户的网站，出于安全考量，仅允许自身域名下的脚本请求资源，不会开放跨域权限给外部域名，因此外部脚本的跨域请求会被浏览器拦截。

内容的提问来源于stack exchange，提问作者Grant Curell