通过AJAX获取图片URL时状态码始终为0，如何改为200？

嘿，我来帮你分析下这个问题——当请求图片返回status=0时，这通常是浏览器的安全限制或请求被中断导致的，咱们一步步拆解原因和解决办法：

1. 跨域资源共享（CORS）限制（最常见） #

如果你的前端页面所在域名和https://website.com不是同一个，浏览器会触发同源策略，直接阻止跨域请求，此时XMLHttpRequest/fetch的状态码会显示为0。

解决办法： #

• 后端配置CORS头：让https://website.com的服务器返回Access-Control-Allow-Origin响应头，允许你的前端域名访问。比如开发环境可以临时设置：

  Access-Control-Allow-Origin: *
  

  生产环境建议指定具体域名，避免安全风险。
• 本地开发用代理：如果是Vue/React等框架项目，可通过框架自带的代理配置，或者用Nginx反向代理，把前端请求转发到目标服务器，绕过跨域限制。

2. 请求被中断 #

请求还没完成就被中止，也会返回status=0，常见场景：

• 页面跳转、刷新导致请求中断；
• 浏览器广告拦截器、安全扩展阻止了请求；
• 图片加载逻辑错误（比如重复发起请求覆盖了之前的请求）。

解决办法： #

• 打开浏览器控制台的Network面板，查看请求的Status列是否显示(canceled)，如果是：
  • 排查有没有拦截类浏览器扩展，临时禁用后再测试；
  • 确保请求在页面生命周期内完整执行（比如表单提交时阻止默认跳转行为）。
• 直接在浏览器地址栏输入https://website.com/xxx，验证图片是否能正常加载。如果能，说明问题出在前端请求逻辑上。

3. 请求逻辑或路径错误 #

你提到用GET方法，但要确认前端是否正确发起了请求：

• 表单的提交方法是不是GET？有没有拼写错误？
• 请求URL是否正确（比如有没有漏写路径、域名拼写错误）？

简化的正确请求示例（针对你的场景） #

其实不用手动发XHR/fetch，直接给<img>元素赋值src是更简单的方式，浏览器会自动处理GET请求，还能通过onload/onerror判断状态：

<!-- templates/homeDEV.html -->
<html>
<head>
  <title>获取图片</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
  <form id="imgForm">
    <input type="text" id="inputVal" placeholder="输入图片标识">
    <button type="submit">加载图片</button>
  </form>
  <img id="resultImg" alt="加载的图片" style="margin-top:20px;">

  <script>
    const form = document.getElementById('imgForm');
    const img = document.getElementById('resultImg');
    const input = document.getElementById('inputVal');

    form.addEventListener('submit', (e) => {
      e.preventDefault(); // 阻止表单默认提交（避免页面跳转中断请求）
      const imgUrl = `https://website.com/${input.value.trim()}`;
      
      img.onload = () => {
        console.log('图片加载成功！此时HTTP状态码为200');
      };
      img.onerror = () => {
        console.error('图片加载失败，请检查URL或权限');
      };
      
      img.src = imgUrl;
    });
  </script>
</body>
</html>

1. 直接在浏览器地址栏访问目标图片URL，确认图片能正常返回；
2. 检查浏览器控制台的Console和Network面板，看有没有跨域报错或请求被canceled的提示；
3. 用上面的<img>直接赋值src的方式测试，替代手动XHR请求，减少逻辑复杂度。

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