Question

我尝试使用使用HTTP身份验证的系统制作iframe。我使用此代码：

<iframe id="dashboard"></iframe>
<script type="text/javascript">
                            $.ajax(
                                {
                                    url: \'https://mysystem.xxxx/\',
                                    beforeSend: function(xhr) {
                                    xhr.withCredentials = true;

                                    xhr.setRequestHeader(
                                    "Authorization", "Basic Z2Vxxxxxxxxxxx=="
                                    );
                                    },
                                     success: function(data) {
                                    $(\'#dashboard\').attr(\'src\', \'https://mysystem.xxxx\');
                                    $(\'#dashboard\').contents().find(\'html\').html(data);
                                    }

                                }
                            );
                        </script>

使用此代码，当加载页面时，它会向系统生成三个请求：

选项 - ＆gt;验证CORS选项;这没关系。
GET - ＆gt;包含auth标头。系统返回200并发送数据。
其他GET - ＆gt;没有auth标头。然后系统返回＆＃34; 401＆＃34;。这是一个问题。

如果我删除此行：

$(\'#dashboard\').attr(\'src\', \'https://mysystem.xxxx\');

页面加载，但iframe的静态内容（images，css，js）返回404.

Answer 1

您可以使用绝对路径制作图片，css，js资源，例如：https://somedomain.com/path/to/image.jpg。这样，您就不需要提供src的iframe。

<强>更新

假设您的服务器以字符串形式返回data，您可以搜索＆amp;将那里的所有相对路径替换为绝对路径。

＆＃13;

const data = `<link rel="/css/relative/path" /><body><img src="/some/relative/path"/>
<img src="https://some-other-abs.com" /></body>`;

const absData = data.replace(/(?:rel|src)="([^"]+)"/g, function(group, match) {
  if (!match.startsWith('http')) {
    return group.replace(match, `http://example.com${match}`);
  }
  return group;
})
console.log(absData);

＆＃13;

如何在没有新请求的情况下修改ajax src atributte？

1 个答案: