Express提供的图片URL在跨域img标签中无法加载求助

你的问题核心是浏览器跨域资源限制：直接在地址栏访问图片URL属于同源请求（无跨域上下文），但其他服务器页面的<img>标签加载图片属于跨域请求，浏览器会校验服务器返回的CORS响应头，若缺失相关权限则会拦截资源。

解决步骤：

• 安装cors中间件：

  npm install cors
  

• 在Express中配置CORS，有两种可选方式：

  1. 全局允许所有跨域请求（适合测试或公开资源场景）：

     const cors = require('cors');
     // 先加载cors中间件
     app.use(cors());
     // 再挂载静态资源路由
     app.use('/api/img', express.static(path.join(__dirname, 'img')));
     

  2. 精细配置，仅允许特定域名访问（生产环境更安全）：

     const cors = require('cors');
     const corsOptions = {
       origin: 'https://你的目标服务器域名', // 替换为实际需要允许的域名，多域名可传入数组
       optionsSuccessStatus: 200
     };
     // 仅针对图片路由启用CORS校验
     app.use('/api/img', cors(corsOptions), express.static(path.join(__dirname, 'img')));
     

• 重启Express服务器后，其他域名页面的<img>标签即可正常加载目标图片。

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