如何解决CORS头‘Access-Control-Allow-Origin’缺失的跨域报错问题？

首先明确错误原因 #

• URL拼接错误：你定义的src已经是完整的图片资源地址，ajax请求中重复拼接了域名前缀，导致实际请求地址错误
• 后端CORS配置未覆盖静态资源：报错提示Access-Control-Allow-Origin缺失，说明你配置的CORS规则没有对media目录下的静态资源生效，大部分服务端框架/服务器默认不会给静态资源自动添加CORS响应头
• AJAX请求未配置正确的响应类型：直接请求图片返回的是二进制流，默认按文本处理无法直接转为base64赋值给img标签

修复步骤 #

第一步：修复后端CORS配置（必做） #

根据你使用的服务端部署方式选择对应配置：

• 若用Nginx托管静态资源，在media路径配置块添加如下规则：

location /media/ {
    # 测试阶段可设为*，上线建议替换为你的前端实际域名
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, OPTIONS';
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    # 其余原有静态资源配置保持不变
}

• 若用Django等后端框架处理静态资源，确保CORS中间件配置正确，且静态资源请求会经过CORS中间件处理，不要直接将media目录交给服务器托管绕过后端中间件。

第二步：修复前端代码 #

修正拼接错误，添加响应类型配置，将返回的二进制流转为base64：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<img id="datadiv"></img>

var src = 'https://codedecoder.pythonanywhere.com/media/embed/2021/10/07/temp.jpg'
$.ajax({
  type: "GET",
  url: src, // 移除重复的域名拼接
  crossDomain: true,
  xhrFields:{
    responseType: 'blob' // 指定返回二进制流
  },
  success: function(blob) {
    // 将二进制流转为base64
    const reader = new FileReader()
    reader.onload = () => {
      $('#datadiv')[0].src = reader.result
    }
    reader.readAsDataURL(blob)
  },
  error: (err) => console.log('请求失败', err)
})

额外优化方案 #

如果你只是需要展示图片不需要获取base64做其他处理，img标签天然支持跨域加载图片，不需要走AJAX请求，直接赋值即可：

var src = 'https://codedecoder.pythonanywhere.com/media/embed/2021/10/07/temp.jpg'
$('#datadiv')[0].src = src

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