在HTTPS环境的Angular应用中调用HTTP API的解决方案咨询

首先明确：现代浏览器不允许HTTPS页面直接发起HTTP的API请求，这是浏览器内置的混合内容安全策略——主动混合内容（如fetch/XHR请求）会被直接拦截，没有纯前端的方法能绕过这个限制，因为这涉及到核心的安全风险防护。

针对你的场景，可行的解决方案是通过中间代理服务器中转请求，具体有两种实现方式：

1. 自建反向代理服务器 #

搭建一个支持HTTPS的代理服务器，让Angular应用向这个代理发起HTTPS请求，再由代理服务器用HTTP转发到目标API。这样浏览器只和代理建立HTTPS连接，不会触发混合内容错误。

示例：Node.js Express代理 #

const express = require('express');
const request = require('request');
const https = require('https');
const fs = require('fs');

const app = express();

// 代理路由：匹配/api-proxy开头的请求，转发到目标HTTP API
app.use('/api-proxy', (req, res) => {
  const targetApiBase = 'http://目标API的地址'; // 替换为实际的HTTP API地址
  const targetUrl = `${targetApiBase}${req.url}`;
  // 转发请求，保留原请求的方法、头部和内容
  req.pipe(request(targetUrl)).pipe(res);
});

// 启动HTTPS服务（需要SSL证书，可通过Let's Encrypt免费获取）
const sslOptions = {
  key: fs.readFileSync('./private-key.pem'),
  cert: fs.readFileSync('./certificate.pem')
};

https.createServer(sslOptions, app).listen(443, () => {
  console.log('代理服务器已启动，监听443端口');
});

之后在Angular的API请求配置中，把基础地址改为代理服务器的HTTPS地址，比如：

// Angular服务中的请求示例
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getApiData() {
  return this.http.get('https://你的代理域名/api-proxy/具体接口路径');
}

2. 使用无服务器代理服务 #

如果不想自己维护服务器，可以用Cloudflare Workers、Vercel Edge Functions等无服务器服务搭建代理，同样实现HTTPS转HTTP的中转。

示例：Cloudflare Worker脚本 #

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

async function handleRequest(request) {
  // 解析请求，替换协议和主机为目标HTTP API的地址
  const targetUrl = new URL(request.url);
  targetUrl.protocol = 'http:';
  targetUrl.host = '目标API的主机地址'; // 替换为实际的API主机

  // 构造转发请求，保留原请求的方法、头部和内容
  const modifiedRequest = new Request(targetUrl.toString(), {
    method: request.method,
    headers: request.headers,
    body: request.body,
    redirect: 'follow'
  });

  // 发送请求并返回响应
  return fetch(modifiedRequest);
}

部署这个Worker后，Angular应用直接请求Worker的HTTPS地址即可，Worker会自动中转到目标HTTP API。

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