部署在GitHub Pages的Angular应用API调用出现混合内容错误

我来帮你搞定这个问题！你遇到的是**混合内容（Mixed Content）**错误，这是浏览器的安全机制在起作用——你的GitHub Pages页面是通过HTTPS加密加载的，但你发起的API请求却是不安全的HTTP协议，浏览器为了保护用户数据，直接阻止了这种跨协议的请求。

咱们先看看你的代码问题：
你的API地址写的是/api.themoviedb.org/3/search/movie/?api_key=...，这种写法有两个明显问题：

1. 开头的斜杠会让浏览器把当前页面的域名（https://githamza.github.io）拼上去，变成https://githamza.github.io/api.themoviedb.org/...，这完全不是正确的TMDB API地址；
2. 就算你去掉斜杠写api.themoviedb.org，浏览器也会默认用HTTP协议去请求，还是会触发混合内容错误。

正确的解决方案 #

直接修改API地址，加上完整的HTTPS协议头，同时用Angular的HttpParams来处理查询参数（比直接拼接字符串更安全，还能自动处理编码问题）：

getList(input: string) {
  // 加上完整的HTTPS协议和正确的域名
  const url = 'https://api.themoviedb.org/3/search/movie';
  // 用HttpParams管理查询参数，避免手动拼接的编码问题
  const params = new HttpParams()
    .set('api_key', 'b6dba21fefcead3510c8ddf58eb57d43')
    .set('query', input);
  
  return this.httpClient.get<RootResult>(url, { params });
}

额外提醒 #

• 别把API密钥硬编码在前端！ 现在你的密钥直接写在代码里，任何人只要查看你的GitHub仓库源码就能拿到，建议后续改用后端代理来传递API密钥，或者用Angular的环境变量（但环境变量在前端还是能被看到，最好的方式是后端中转）；
• 如果修改后还是遇到跨域错误，不用太担心——TMDB官方API是支持跨域请求的，大概率是参数配置问题，检查一下请求格式即可。

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