Flask页面无法加载Instagram用户热门图片：求解决方案及原因

问题 #

我运行着一个简单的Python/Flask/HTML页面，想要展示用户的最热门Instagram图片。我添加了一个简单的img标签：

<img src="{{post}}" alt="HTML5 Icon" style="width:300px;height:300px;">

Flask后端代码如下：

from instaloader import Instaloader, Profile

def func(): 
   ....
   user=request.form['username']
   post=getPost(user) #内部函数，用于获取用户最热门的帖子
   return render_template('posts.html', post=post.url)

但图片始终无法加载，不过直接在浏览器中打开该链接却能正常显示。我尝试了以下方法但都无效：

• 给img标签添加crossorigin属性并设置为"anonymous"；
• 对URL进行base64编码，调整后的img标签为：

<img crossorigin="anonymous" src="data:image/jpg;base64,{{post}}" alt="HTML5 Icon" style="width:300px;height:300px;">

后端代码改为：

x=post.url.encode('utf-8')
temp= base64.b64encode(x).decode('utf-8')
return render_template('posts.html', post=temp)

请问是否有简单解决方案？Instagram为何会阻止图片显示？

解决方案及原因分析 #

核心原因：Instagram防盗链机制 #

Instagram通过检查请求的Referer请求头限制图片外链。当前端直接引用Instagram图片URL时，浏览器会将当前页面地址作为Referer发送给Instagram服务器，服务器识别到请求并非来自自身域名，就会拒绝返回图片资源；而直接在浏览器打开URL时，Referer为空或来自浏览器自身，因此能正常加载。

可行解决方案：Flask代理转发 #

不要让前端直接请求Instagram的图片URL，而是通过Flask后端做一层代理，由后端请求图片资源后再返回给前端：

1. 新增Flask代理路由

import requests
from flask import send_file, make_response, request

@app.route('/proxy-image')
def proxy_image():
    img_url = request.args.get('url')
    if not img_url:
        return "缺少图片URL参数", 400
    
    # 模拟浏览器请求头，避免被Instagram拦截
    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
    }
    
    # 流式请求图片，避免占用过多内存
    response = requests.get(img_url, headers=headers, stream=True)
    if response.status_code != 200:
        return "获取图片失败", 404
    
    # 构造响应返回给前端
    resp = make_response(send_file(response.raw, mimetype=response.headers['Content-Type']))
    resp.headers['Content-Length'] = response.headers['Content-Length']
    return resp

2. 修改前端img标签，通过代理接口加载

<img src="{{ url_for('proxy_image', url=post) }}" alt="用户热门图片" style="width:300px;height:300px;">

3. 原后端返回逻辑保持不变

return render_template('posts.html', post=post.url)

为什么之前的尝试无效？ #

• crossorigin="anonymous"：该属性用于跨域请求时的Cookie控制，而Instagram的限制是基于Referer校验，因此这个设置无法解决问题。
• Base64编码URL：只是将URL字符串转成了base64格式，前端解析后仍然是原Instagram URL，依然会触发防盗链机制，完全起不到作用。

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