vue Refused to display 'xxxxxx' in a frame because it set 'X-Frame-Options' to 'deny'.

<el-dialog
    v-model="previewDoc"
    title="Tips"
    width="900px"
>
  <iframe style="height: 100%;width: 100%" src="xxxxx" />
  <template #footer>
  <span class="dialog-footer">
    <el-button type="primary" @click="previewDoc = false"
    >关闭</el-button
    >
  </span>
  </template>
</el-dialog>

Vue中镶嵌iframe，访问时报错

项目后端使用的是spring boot，安全框架使用的是SpringSecurity, 允许使用iframe嵌入可能会导致网站被劫持等安全问题，因此默认Spring boot都是禁止iframeq嵌入。

解决办法：

1.添加Security配置类继承DefaultWebSecurityConfigurer
@EnableWebSecurity
@Configuration
public class WebSecurityConfig extends DefaultWebSecurityConfigurer {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        super.configure(http);
       //disable 默认策略。 这一句不能省。 
        http.headers().frameOptions().disable();
       //指定域名。 
        http.headers().addHeaderWriter(new XFrameOptionsHeaderWriter(
                new WhiteListedAllowFromStrategy(
                        Arrays.asList("xxx", "xxx",
                                "xxx"))));
    }
}


2. 设置sameOrigin允许相同域名嵌入
@EnableWebSecurity
@Configuration
public class WebSecurityConfig extends DefaultWebSecurityConfigurer {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        super.configure(http);
        http.headers().frameOptions().sameOrigin();

    }
}


3. 完全开放
@EnableWebSecurity
@Configuration
public class WebSecurityConfig extends DefaultWebSecurityConfigurer {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        super.configure(http);
        http.headers().frameOptions().disable();
    }
}

如果是接口形式，也可以直接对response新增header

@RequestMapping(“/index”) 
public String index(HttpServletResponse response){ 
    response.addHeader(“x-frame-options”,”SAMEORIGIN”); 
    return “manager/index”; 
}

如果是服务器，在nginx/apache添加对应header也可以