Flask静态资源与SocketIO嵌入NiceGUI时的路径及跨域问题

一、修复静态资源路径错误 #

问题根源：Flask渲染的静态资源路径是相对根路径（/static/js/viewer.js），嵌入NiceGUI后浏览器会向NiceGUI的地址（127.0.0.1:8080）请求资源，而非Flask服务器（0.0.0.0:5500）。

有两种可行修复方式：

• 方式1：Flask渲染时生成绝对路径
  修改Flask模板中的url_for调用，添加_scheme和_server参数强制生成完整URL：

  <script src="{{ url_for('static', filename='js/viewer.js', _scheme='http', _server='0.0.0.0:5500') }}"></script>
  

  这样渲染后的HTML会直接指向Flask的静态资源地址，无需后续修改。

• 方式2：获取HTML后批量替换路径
  如果无法修改Flask模板，可在使用requests获取HTML文本后，替换相对路径为Flask的绝对地址：

  import requests
  
  response = requests.get("http://0.0.0.0:5500/view/1234")
  corrected_html = response.text.replace("/static/", "http://0.0.0.0:5500/static/")
  # 将corrected_html嵌入NiceGUI
  

二、修复SocketIO连接与跨域问题 #

1. 修正SocketIO连接地址 #

原JS代码使用document.domain和location.port会获取NiceGUI的地址，需硬编码为Flask服务器的SocketIO端点：

$( window ).on( "load", function() {
    // 直接指定Flask的SocketIO地址
    socket = io.connect('http://0.0.0.0:5500/view');
    // 后续逻辑...
});

2. 解决Flask端跨域错误 #

Flask-SocketIO默认限制跨域请求，需配置允许NiceGUI的地址作为合法来源：

• 方法1：直接配置SocketIO
  初始化SocketIO时添加cors_allowed_origins参数：

  from flask import Flask
  from flask_socketio import SocketIO
  
  app = Flask(__name__)
  # 允许NiceGUI的地址跨域访问
  socketio = SocketIO(app, cors_allowed_origins="http://127.0.0.1:8080")
  

  若需允许多个测试地址，可传入列表：cors_allowed_origins=["http://127.0.0.1:8080", "http://localhost:8080"]

• 方法2：使用Flask-CORS扩展
  安装扩展后全局配置CORS规则：

  pip install flask-cors
  

  from flask import Flask
  from flask_cors import CORS
  from flask_socketio import SocketIO
  
  app = Flask(__name__)
  # 仅允许NiceGUI地址访问/view开头的SocketIO路径
  CORS(app, resources={r"/view/*": {"origins": "http://127.0.0.1:8080"}})
  socketio = SocketIO(app)
  

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