Laravel中如何将GET API返回的HTML响应展示到新标签页或iframe

下面给出两种可直接落地的实现方案，优先推荐第一种： #

方案1：后端代理直接返回HTML（最优） #

该方案所有敏感认证逻辑都在后端处理，不会泄露密钥，也不存在跨域问题，兼容性最好。

• 新增Laravel路由，用于处理前端的页面打开请求：

// routes/web.php
Route::get('/render-third-party-html', [ThirdPartyController::class, 'renderHtml'])->name('render.third-party.html');

• 在对应控制器中编写Guzzle请求逻辑，拿到第三方接口返回的HTML后直接输出，设置正确的响应头：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use GuzzleHttp\Client;

class ThirdPartyController extends Controller
{
    public function renderHtml(Request $request)
    {
        // 此处可添加你自身系统的权限校验逻辑，避免接口被恶意调用
        $userDetails = auth()->user()->toArray(); // 替换为你自己获取user_id、login_auth_key的逻辑

        $client = new Client();
        $thirdPartyResponse = $client->request('GET', '你的目标GET接口地址', [
            'auth' => ['test', 'key'],
            'headers' => [
                'Accept' => '*/*'
            ],
            'query' => [
                'user_id' => $userDetails['user_id'],
                'login_auth_key' => $userDetails['login_auth_key']
            ]
        ]);

        // 直接返回HTML内容，指定响应格式为text/html
        return response($thirdPartyResponse->getBody()->getContents(), 200)
            ->header('Content-Type', 'text/html');
    }
}

• 前端按钮/超链接直接绑定该路由，添加target="_blank"属性即可：

<a href="{{ route('render.third-party.html') }}" target="_blank" class="btn btn-primary">打开第三方页面</a>

用户点击链接后会自动打开新标签，直接渲染第三方接口返回的HTML内容，完全符合需求。
如果HTML中存在相对路径的静态资源（CSS/JS/图片）加载失败的问题，只需在返回HTML前，通过字符串替换把相对路径补全为第三方站点的绝对路径即可。 #

方案2：前端Blob临时链接方案 #

该方案适合内部系统、对安全性要求不高的场景使用：

• 前端绑定点击事件，请求拿到HTML内容后转成Blob对象生成临时访问链接，新开标签打开：

document.getElementById('openHtmlBtn').addEventListener('click', async function() {
  try {
    const res = await fetch('{{ route('render.third-party.html') }}');
    const htmlContent = await res.text();
    // 生成Blob对象
    const blob = new Blob([htmlContent], { type: 'text/html' });
    // 生成临时访问链接
    const tempUrl = URL.createObjectURL(blob);
    // 新开标签打开
    window.open(tempUrl, '_blank');
    // 10秒后释放临时链接占用的内存
    setTimeout(() => URL.revokeObjectURL(tempUrl), 10 * 1000);
  } catch (err) {
    alert('页面加载失败，请稍后重试');
    console.error(err);
  }
})

提示：该方案如果直接请求第三方接口会存在跨域问题，需要第三方接口配置CORS规则，且认证信息暴露在前端有泄露风险，非特殊场景不推荐使用。

内容的提问来源于stack exchange，提问作者Nick Dillom