如何通过API请求加载LinkedIn头像至HTML img标签？

问题原因 #

LinkedIn的媒体链接带有防盗链机制，会校验请求的Referer头和CORS设置，前端直接通过img标签或fetch调用会被服务器拦截。

可行解决方案 #

1. 搭建后端代理服务器

通过后端请求LinkedIn头像链接，再将图片数据返回给前端，绕过浏览器的CORS和防盗链限制。

示例（Node.js + Express）：

const express = require('express');
const axios = require('axios');
const app = express();

// 代理接口
app.get('/proxy-avatar', async (req, res) => {
  const avatarUrl = req.query.url;
  if (!avatarUrl) return res.status(400).send('Missing avatar URL');

  try {
    // 请求LinkedIn图片，获取流数据
    const response = await axios.get(avatarUrl, { responseType: 'stream' });
    // 传递原图片的Content-Type
    res.setHeader('Content-Type', response.headers['content-type']);
    // 将图片流转发给前端
    response.data.pipe(res);
  } catch (err) {
    res.status(404).send('Avatar unavailable');
  }
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

前端调用方式：

<img src="http://localhost:3000/proxy-avatar?url=你的LinkedIn头像链接">

2. 规范使用LinkedIn官方API

如果是通过LinkedIn API获取用户数据：

• 确保你的应用已在LinkedIn开发者平台完成授权配置，拥有合法的API访问权限；
• 优先使用API返回的profilePicture.displayImage~.elements字段中的图片链接，这类链接带有合法签名，可直接在授权后的前端应用中使用；
• 检查开发者平台的CORS白名单配置，确保你的前端域名已被允许。

注意事项 #

• 不要尝试破解LinkedIn的防盗链机制，违反服务条款可能导致账号或应用被封禁；
• 代理服务器需控制请求频率，避免触发LinkedIn的反爬虫限制。

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