V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
OkabeRintaro
V2EX  ›  程序员

大佬们,想问下 iframe 标签如何在请求头携带 token 啊?

  •  
  •   OkabeRintaro · 2022-11-14 09:29:00 +08:00 · 2468 次点击
    这是一个创建于 751 天前的主题,其中的信息可能已经有所发展或是发生改变。

    iframe 标签的 src,那个 url 链接的请求需要 token 有办法在里面携带 token 吗?
    场景:现在有一个客服弹窗,这个弹窗是 iframe 标签根据 src 内嵌的。
    问题:我登录了,我点击客服,弹窗出现,但是会报 未登录(因为发送请求并未携带 token )
    想法:既然没有 token ,那我给它加上 token 不就好了吗?
    难点:不知道通过什么方法给 iframe 标签的 src 链接,放上一个 token 带过去。。。。 对了,不要参数拼接。。。。。
    大佬们,有办法解决吗?

    10 条回复    2022-11-14 11:40:14 +08:00
    lazyfighter
        1
    lazyfighter  
       2022-11-14 09:45:03 +08:00
    先说明需要怎么携带,cookie 同一个域里面应该能携带呀
    OkabeRintaro
        2
    OkabeRintaro  
    OP
       2022-11-14 09:47:42 +08:00
    @lazyfighter 像请求拦截器一样在 headers 里面携带
    config.headers["Token"] = localStorage.getItem("token");
    config.headers["Accept"] = "*/*";
    lynan
        3
    lynan  
       2022-11-14 09:55:18 +08:00
    首先要确定一件事:未登录错误是否是 iframe src 的 DOC 请求返回的?
    如果是:我不懂,留给楼下
    如果不是:你应该从 iframe 客服应用如何设置 token 的环节上去解决你的问题
    libook
        4
    libook  
       2022-11-14 09:56:46 +08:00   ❤️ 13
    1. 打开 Google ;
    2. 搜索关键词“set header for iframe src”;
    3. 点击第一条结果“Is it possible to add Request Headers to an iframe src request?”;
    4. 滚动到高赞答案,表示使用 JS 带 Header 请求目标地址,然后使用 URL.createObjectURL()生成 ObjectURL 赋给 iframe ;
    5. MDN 上搜索 URL.createObjectURL()阅读文档。
    DICK23
        5
    DICK23  
       2022-11-14 09:57:56 +08:00
    通过 postmessage 传递数据?
    NjcyNzMzNDQ3
        6
    NjcyNzMzNDQ3  
       2022-11-14 10:17:49 +08:00
    我猜楼主在本地调试 iframe 跨域了,线上环境没有·未登录·问题。
    OkabeRintaro
        7
    OkabeRintaro  
    OP
       2022-11-14 10:32:18 +08:00
    @libook 3Q 这就去看
    Envov
        8
    Envov  
       2022-11-14 10:56:34 +08:00
    @libook 经典
    OkabeRintaro
        9
    OkabeRintaro  
    OP
       2022-11-14 11:06:56 +08:00
    <template>
    <div>
    <iframe id="iframe" src="" style="width: 500px; height: 500px" />
    </div>
    </template>

    <script>
    export default {
    created() {
    setTimeout(() => {
    var iframe = document.querySelector("#iframe");
    this.populateIframe(iframe, [["Token", localStorage.getItem("token")]]);
    }, 0);
    },
    methods: {
    populateIframe(iframe, headers) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "api/home.chat/chat?type=1");
    xhr.responseType = "blob";
    headers.forEach((header) => {
    xhr.setRequestHeader(header[0], header[1]);
    });
    xhr.onreadystatechange = () => {
    if (xhr.readyState === xhr.DONE) {
    console.log(xhr.response);
    if (xhr.status === 200) {
    iframe.src = URL.createObjectURL(xhr.response);
    }
    }
    };
    xhr.send();
    },
    },
    };
    </script>

    <style></style>
    OkabeRintaro
        10
    OkabeRintaro  
    OP
       2022-11-14 11:40:14 +08:00
    现在能成功连接到客服了,但是样式,图片的全部失效了,因为里面用的是相对地址,我也不知道为啥会没有样式,图片,所以决定不采用 heards 携带 token 了,直接 URL 拼接 token 试下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1044 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:31 · PVG 03:31 · LAX 11:31 · JFK 14:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.