错误信息表明，浏览器拒绝在 <iframe> 中加载 http://localhost:8081/，因为服务器返回的响应头中设置了 X-Frame-Options: deny。这是浏览器的一种安全机制，用于防止点击劫持攻击。

---

1. 问题原因

X-Frame-Options 是 HTTP 响应头的一部分，用于控制页面是否可以在 <iframe> 中加载。常见的值包括：

• DENY：禁止页面在任何 <iframe> 中加载。

• SAMEORIGIN：只允许同源页面在 <iframe> 中加载。

• ALLOW-FROM uri：允许指定来源的页面在 <iframe> 中加载（已弃用）。

默认情况下，Spring Security 会设置 X-Frame-Options: DENY，导致页面无法在 <iframe> 中加载。

---

2. 解决方法

2.1 禁用 X-Frame-Options

在 Spring Security 配置中禁用 X-Frame-Options，允许页面在 <iframe> 中加载。

2.1.1 修改 Spring Security 配置

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .headers()
                .frameOptions().disable() // 禁用 X-Frame-Options
                .and()
            .authorizeRequests()
                .antMatchers("/**").permitAll(); // 允许所有请求
    }
}

2.2 允许同源加载

如果希望允许同源页面在 <iframe> 中加载，可以将 X-Frame-Options 设置为 SAMEORIGIN。

2.2.1 修改 Spring Security 配置

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .headers()
                .frameOptions().sameOrigin() // 允许同源页面在 iframe 中加载
                .and()
            .authorizeRequests()
                .antMatchers("/**").permitAll(); // 允许所有请求
    }
}

2.3 允许指定来源加载

如果需要允许特定来源的页面在 <iframe> 中加载，可以使用 Content-Security-Policy 头。

2.3.1 修改 Spring Security 配置

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .headers()
                .frameOptions().disable() // 禁用 X-Frame-Options
                .contentSecurityPolicy("frame-ancestors 'self' http://localhost:8081") // 允许指定来源
                .and()
            .authorizeRequests()
                .antMatchers("/**").permitAll(); // 允许所有请求
    }
}

3. 前端调整

如果使用 Layui 的 layer.open 打开页面，确保目标页面支持在 <iframe> 中加载。

3.1 示例代码

layer.open({
    type: 2,
    title: '角色授权',
    content: '/menu/tree?userId=' + userId,
    area: ['500px', '600px']
});

4. 总结

通过以下方式解决问题：

1. 禁用 X-Frame-Options：允许页面在 <iframe> 中加载。

2. 设置 SAMEORIGIN：允许同源页面在 <iframe> 中加载。

3. 使用 Content-Security-Policy：允许指定来源的页面在 <iframe> 中加载。

根据实际需求选择合适的方案，确保页面安全性和功能正常。