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

[OkabeRintaro]

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

[lazyfighter]

先说明需要怎么携带，cookie 同一个域里面应该能携带呀

[OkabeRintaro]

@lazyfighter 像请求拦截器一样在 headers 里面携带
config.headers["Token"] = localStorage.getItem("token");
config.headers["Accept"] = "*/*";

[lynan]

首先要确定一件事：未登录错误是否是 iframe src 的 DOC 请求返回的？
如果是：我不懂，留给楼下
如果不是：你应该从 iframe 客服应用如何设置 token 的环节上去解决你的问题

[libook]

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]

通过 postmessage 传递数据?

[NjcyNzMzNDQ3]

我猜楼主在本地调试 iframe 跨域了，线上环境没有·未登录·问题。

[OkabeRintaro]

@libook 3Q 这就去看

[Envov]

@libook 经典

[OkabeRintaro]

<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]

现在能成功连接到客服了,但是样式,图片的全部失效了,因为里面用的是相对地址,我也不知道为啥会没有样式,图片,所以决定不采用 heards 携带 token 了,直接 URL 拼接 token 试下