在Next.js中通过Fetch配置允许混合内容（Vercel托管）

首先明确：浏览器的混合内容安全策略会直接拦截HTTPS页面发起的HTTP请求，这是浏览器层面的强制限制，没法通过配置fetch的参数绕过。

可行的解决方案： #

• 使用Next.js服务器组件发起请求：
  服务器组件的fetch请求是在Vercel服务器端执行的，不受浏览器混合内容规则限制。你可以直接在服务器组件中请求HTTP数据源，再将处理后的结果渲染到页面中。示例代码：

  // 服务器组件（Server Component）
  async function DataComponent() {
    const res = await fetch('http://your-http-api.com/data', { cache: 'no-store' });
    const data = await res.json();
    return <div>{JSON.stringify(data)}</div>;
  }
  export default DataComponent;
  

• 通过API Routes/Edge Functions做代理：
  在项目中创建一个API路由（或Edge Function），作为中间层代理HTTP请求。客户端组件请求这个HTTPS的API路由，由服务器端去调用HTTP数据源，再把结果返回给客户端。示例：

  // app/api/proxy/route.js
  export async function GET() {
    const res = await fetch('http://your-http-api.com/data', {
      headers: {
        'Content-Type': 'application/json',
      },
      cache: 'no-store',
    });
    const data = await res.json();
    return Response.json(data);
  }
  

  客户端组件中请求这个代理路由：

  // 客户端组件（Client Component）
  async function fetchData() {
    const res = await fetch('/api/proxy');
    const data = await res.json();
    // 处理数据
  }
  

注意事项： #

• 这种方式会引入安全风险，HTTP请求容易被中间人攻击，所以如果有机会，还是优先推动数据源升级到HTTPS。
• Vercel的服务器端请求会遵循平台的网络限制，确保HTTP源的可达性。

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