如何用HTML/JavaScript在前端展示Instagram头像？加载出错求助

我通过链接 https://www.instagram.com/USERNAME/?__a=1&__d=1 获取Instagram用户头像，接口返回的profile_pic_url字段就是头像地址，但用以下HTML代码展示时出现了跨域错误（报错提示图片资源存在跨域访问限制）：

<img width="70" src=<profile_pic_url> alt="Profile" className="profile-pic-preview"/>

问题原因 #

Instagram的图片资源设置了CORS（跨域资源共享）策略，禁止外部域名直接引用其服务器上的图片，所以前端直接用接口返回的头像地址会触发跨域报错。

解决办法 #

• 后端代理转发（最通用的方案）
  自己搭建一个后端接口，由后端去请求Instagram的头像资源，再把资源返回给前端。前端请求的是同域名的代理接口，就不会触发跨域限制。
  举个Node.js（Express框架）的简单示例：

  const express = require('express');
  const axios = require('axios');
  const app = express();
  
  // 代理获取头像的接口
  app.get('/proxy-insta-avatar', async (req, res) => {
    const username = req.query.username;
    if (!username) return res.status(400).send('缺少用户名参数');
    
    try {
      // 先调用Instagram的接口拿到头像地址
      const instaResp = await axios.get(`https://www.instagram.com/${username}/?__a=1&__d=1`);
      const avatarUrl = instaResp.data.graphql.user.profile_pic_url;
      
      // 后端请求头像资源并转发给前端
      const avatarResp = await axios.get(avatarUrl, { responseType: 'stream' });
      avatarResp.data.pipe(res);
    } catch (err) {
      res.status(500).send('获取头像失败');
    }
  });
  
  app.listen(3001, () => console.log('代理服务运行在3001端口'));
  

  前端代码修改为调用代理接口：

  <img width="70" src="/proxy-insta-avatar?username=你的目标用户名" alt="Profile" className="profile-pic-preview"/>
  

• 使用Instagram官方嵌入工具
  如果你的场景符合平台规范，可以使用Instagram官方提供的嵌入功能来展示用户头像，这种方式是合法合规的，不会有跨域问题。

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