在dataV的iframe组件，嵌入本地部署的http网站

本文链接：https://blog.youkuaiyun.com/yong_gan_niu_niu/article/details/144419793

1.首先在datav里插入iframe组件，并且填写你的http网站url

2.首先我们的网站如果是http头，那么就存在一个安全问题。‌这是浏览器的安全策略限制，有两种办法解决：

1.将HTTP资源转换为HTTPS‌：最直接的解决方法是将所有的HTTP资源转换为HTTPS。这可以通过配置服务器或使用代理服务器来实现。例如，可以使用nginx等服务器软件，通过SSL模块将HTTP资源包装成HTTPS资源‌34。‌

2.修改浏览器设置‌：在某些情况下，可以通过修改浏览器设置来允许HTTPS页面嵌入HTTP资源。例如，在Chrome浏览器中，可以在设置中允许不安全的内容加载。具体操作是进入“设置 - 隐私设置和安全性 - 网站设置 - 不安全问题”，然后将HTTPS页面域名和HTTP页面的域名都添加进去‌。

转换https大部分需要花钱，我们这里先选择第二种。需要打开浏览器的设置，在网站权限这里添加让datav网站允许不安全内容，不然iframe里不会显示我们的网站而是一直透明。

设置好之后就能看到画面了。但是登录的时候，一直跳转根目录，无法进入登陆后的用户界面，开发者控制台一直显示无法携带数据重定向，这是因为没有读取到cookie数据。

点开cookie可以看到网页有7个cookie在使用，但是点进去详情，正在被使用的只有阿里云的cookie。

说明我们嵌入的网站的cookie没有被使用，这是因为：Cookie实际上是一小段的文本信息，是服务器发送到用户浏览器并保存在本地的一小块数据。后面如果你使用了cookie来传输用户数据的话，因为阿里云的父页面不允许子页面的cookie传递（跨域限制、同源限制），所以不能使用cookie。

3.改成使用session保存数据，然后利用URL重写，可以通过response.encodeURL(url) 进行实现，将SessionID拼接到访问地址后来传递用户信息。
什么是跨域问题：https://help.aliyun.com/zh/datav/datav-6-0/user-guide/how-to-configure-cross-domain-data?spm=a2c4g.11186623.help-menu-43570.d_2_7_6_2.2c863f4cvOdUIL&scm=20140722.H_64140._.OR_help-T_cn#DAS#zh-V_1

Cookie 、Session、localstorage、Sessionstorage的区别:

Cookie 、Session、localstorage、Sessionstorage的区别_cookie localstorage session区别-优快云博客

在python(python3.8以上)代码里添加session会话和url重写函数。

前端的js(我是node v18.0.0以上)的fetch修改成fetchWithSession

session.py:

from datetime import datetime
import uuid
from config import get_db
from flask import current_app
import re

class SessionManager:
    def __init__(self):
        self.db = get_db('config')
        self.collection = self.db.sessions
        
    def create_session(self, user_data):
        """创建新会话"""
        session_id = str(uuid.uuid4())
        session_data = {
            'session_id': session_id,
            'user_data': user_data,
            'created_at': datetime.now()
        }
        self.collection.insert_one(session_data)
        return session_id
        
    def get_session(self, session_id):
        """获取会话数据"""
        if not session_id:
            print("No session ID provided")  # 调试日志
            return None
        
        session = self.collection.find_one({'session_id': session_id})
        print(f"Found session: {session}")  # 调试日志
        return session
        
    def update_session(self, session_id, user_data):
        """更新会话数据"""
        self.collection.update_one(
            {'session_id': session_id},
            {'$set': {'user_data': user_data}}
        )
        
    def delete_session(self, session_id):
        """删除会话"""
        self.collection.delete_one({'session_id': session_id})

def encode_url(url, session_id):
    """URL重写,添加session_id"""
    if not session_id:
        print(f"Warning: No session ID provided for URL: {url}")  # 调试日志
        return url
        
    # 移除任何现有的sid参数
    cleaned_url = re.sub(r'[?&]sid=[^&]+', '', url)
    print(f"Cleaned URL: {cleaned_url}")  # 调试日志
    
    # 始终使用查询字符串格式
    separator = '&' if '?' in cleaned_url else '?'
    final_url = f'{cleaned_url}{separator}sid={session_id}'
    
    print(f"Final encoded URL: {final_url}")  # 调试日志
    return final_url

app.py部分代码：

#用户登录后
@app.route('/<username>')
def index(username=None):
    session_id = request.args.get('sid')
    session_data = session_manager.get_session(session_id)
    current_username = session_data['user_data']['username'] if session_data and session_data.get('user_data') else None
    
    # 如果没有提供用户名但已登录，重定向到带用户名的URL
    if not username and current_username:
        return redirect(encode_url(url_for('index', username=current_username), session_id))
        
    # 如果提供了用户名，验证是否匹配当前登录用户
    if username and username != current_username:
        return redirect(encode_url(url_for('登陆页面'), session_id))
        
    return render_template('你的用户界面.html')

后面修改你的前端代码和路由，都改成使用系统环境的session，就可以使用了。
网站登陆后的url变成：