iframe嵌套显示问题

Question

这是iframe所显示的内容，之前一直显示拒绝连接，在后端配置好以后,又返回了这个json格式的数据，前端需要配置

这个标签吗

Answer 1

引自微信小程序：皆我百晓生。

根据您的描述，您在一个 iframe 标签内加载内容时收到了 JSON 格式的数据而不是预期的HTML页面或资源。这通常意味着后端服务对于请求的URL返回了JSON响应，而 iframe 需要的是可渲染的网页内容。

若要在前端正确处理这种情况，请确保以下几点：

1. 检查 iframe 的 src 属性：
   确认 iframe 的 src 属性指向的服务端接口或路由应该返回一个可嵌入并展示的HTML页面或者静态资源地址，而不是JSON API响应。

2. 后端配合：
   如果这个URL应该是用来获取HTML内容而不是JSON数据的，那么需要后端开发者检查为什么针对这个URL的请求会返回JSON错误信息。可能是一个路由配置错误或者API接口被误用。

3. 前端处理逻辑：
   如果确实应当从这个URL获取JSON数据用于前端逻辑处理而非直接展示，那么你应该通过JavaScript（Vue.js 中可以使用 axios 或 fetch 进行异步请求）来发送 AJAX 请求获取数据，而不是将其放在 iframe 中。

例如，如果数据是要在父页面上展示或处理，你可以在 Vue 组件中使用 Axios 发送 GET 请求：

// 假设你的 Vue 组件有 this.$http (已配置好的axios实例)
this.$http.get('你的URL').then(response => {
  // 正确处理JSON响应
  const data = response.data;
  if (data.code !== 1) { // 根据实际情况处理错误码
    console.error(data.msg);
  } else {
    // 在这里处理正常的业务逻辑
  }
}).catch(error => {
  console.error('请求失败', error);
});

总之，你需要根据实际应用场景调整前端逻辑或者与后端沟通以确保 iframe 能够加载正确的资源。如果是为了获取JSON数据并在父页面中使用，则不需要在 iframe 中配置什么，而是直接在Vue组件中发起AJAX请求获取数据。