Google Chrome预览时Ajax失效且无错误日志问题求助

兄弟，我之前做项目时也踩过一模一样的坑，给你分享几个亲测有效的解决思路，应该能帮你搞定这俩问题！

一、怎么在Chrome里拿到Ajax的错误日志？ #

• 先打开Chrome开发者工具（按F12或者Ctrl+Shift+I都行），切到Network面板：
  • 一定要勾选左上角的「Preserve log」（保留日志），不然页面刷新或者跳转后，请求记录直接就没了
  • 在顶部的Filter输入框里输入XHR或者Fetch，这样就能只显示Ajax相关的请求，不用在一堆请求里找
  • 找到你要排查的请求点进去，先看Status列的状态码，比如404、500、403这些都是错误状态；然后切到Response或者Preview标签看返回内容，再去Console面板找红色的错误提示——这里会告诉你具体是跨域、请求路径错了还是服务器报错
• 如果还是看不到错误，那就在代码里手动加错误监听兜底：

  // XMLHttpRequest的错误监听
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/your-api-path');
  xhr.onerror = function(error) {
    console.error('Ajax请求出错详情:', error);
  };
  xhr.send();
  
  // 用Fetch API的话这么加
  fetch('/your-api-path')
    .then(response => {
      if (!response.ok) {
        throw new Error(`请求失败，状态码: ${response.status}`);
      }
      return response.json();
    })
    .catch(error => console.error('Fetch请求错误:', error));
  

• 最后检查下Console面板的过滤设置：点击Console右上角的过滤图标，确保「Errors」选项是勾选的，别不小心把错误提示给过滤掉了

二、预览时Ajax失效的常见解决办法 #

• 跨域问题是重灾区：如果你是直接打开本地HTML文件（file://协议）预览，Chrome的安全策略会阻止你请求远程服务器或者其他端口的本地服务。解决办法很简单，用本地服务器跑项目：比如装个http-server（先执行npm install -g http-server，然后在项目根目录跑http-server，用http://localhost:8080访问）
• 检查请求URL是否正确：预览环境和开发环境的API地址可能不一样，比如开发时用/api，但预览时可能需要完整的域名，或者路径写错了导致404，去Network面板看请求的「Request URL」就能确认
• 看请求状态码找原因：如果是403/401，大概率是预览环境没有权限，得配置请求头或者认证信息；如果是500，那是服务器端的问题，得找后端同事看日志
• 缓存坑：有时候浏览器会缓存旧的请求结果，导致看起来Ajax没生效。可以在Network面板勾选「Disable cache」（禁用缓存），或者给请求URL加个时间戳参数，比如/api/data?t=${new Date().getTime()}，强制浏览器发新请求

这些方法应该能覆盖大部分情况，你可以一步步排查试试！

内容的提问来源于stack exchange，提问作者Seppe Hemerijckx