Vercel部署的API因HTTP/HTTPS混合内容问题失效，求解决方案

AI 小北

2026-7-23

问题描述

我的API在本地运行正常，但部署到Vercel后无法使用，原因是该API采用HTTP协议，而Vercel要求使用HTTPS。错误提示显示页面通过HTTPS加载，但XMLHttpRequest请求的是不安全的HTTP端点，导致请求被拦截，要求内容通过HTTPS传输。

注意：我并非该API的所有者。

错误信息如下：

Error: "Mixed Content: The page at 'https://my-app.vercel.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://my-api.com'. This request has been blocked; the content must be served over HTTPS."

我尝试使用CloudFlare的“Always use HTTPS”功能，但对域名myapp.supervps.ga无效。请问如何在不使用HTTPS的情况下继续访问，或有其他解决办法？

解决方法

现代浏览器的安全策略不允许HTTPS页面发起HTTP请求，这是硬性的混合内容拦截规则，没有办法绕过这个限制实现面向普通用户的HTTP接口访问（仅个人手动修改浏览器安全设置的方式不具备通用性）。以下是几个可行的解决方案：

搭建反向代理服务
自己部署一个支持HTTPS的代理层，将前端的HTTPS请求转发到目标HTTP API。可以选择轻量的实现方式：
- 用Node.js + Express快速搭建：
```
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// 将/api-proxy开头的请求转发到目标API
app.use('/api-proxy', createProxyMiddleware({
  target: 'http://my-api.com',
  changeOrigin: true,
  pathRewrite: { '^/api-proxy': '' } // 去掉前缀
}));

app.listen(process.env.PORT || 3000);
```
  部署到Vercel、Heroku等支持HTTPS的平台后，前端请求https://your-proxy-domain/api-proxy/xxx即可转发到目标接口。
- 用Nginx配置反向代理：在Nginx配置文件中添加反向代理规则，确保Nginx服务启用HTTPS。

使用Cloudflare Workers做轻量代理
无需单独部署服务器，利用Cloudflare Workers编写转发脚本，Cloudflare会自动为Worker分配HTTPS域名。示例脚本：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  // 构造目标API的请求地址
  const url = new URL(request.url);
  url.host = 'my-api.com';
  url.protocol = 'http:';
  
  // 转发请求并返回响应
  const modifiedRequest = new Request(url, {
    method: request.method,
    headers: request.headers,
    body: request.body,
    redirect: 'follow'
  });
  
  return fetch(modifiedRequest);
}

部署Worker后，前端直接请求Worker的HTTPS地址即可完成转发。

联系API所有者升级HTTPS
这是最根本的解决方案，请求API提供者为接口添加HTTPS支持，从源头解决混合内容拦截问题。

关于你尝试的Cloudflare“Always use HTTPS”功能：该功能仅能强制你的域名myapp.supervps.ga使用HTTPS，无法改变目标APIhttp://my-api.com的协议，因此对解决当前问题没有帮助。

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