使用Fetch发送HTTP请求时被自动转为HTTPS的解决求助

问题原因 #

当网页通过HTTPS协议加载时，浏览器的混合内容保护机制会自动将页面内的HTTP请求升级为HTTPS，禁止加载不安全的HTTP资源，这就是你遇到报错的核心原因。

解决方案 #

1. 改用HTTPS协议调用API #

weatherstack官方支持HTTPS访问，直接将请求URL中的http://替换为https://即可，这是最合规且简单的解决方式：

form.addEventListener("submit", (el) => {
  el.preventDefault();
  const city = input.value;
  fetch(
    `https://api.weatherstack.com/current?access_key=113582164e8a6873ca56cbba32c571ee&query=${city}`,
    {
      referrerPolicy: "unsafe-url",
    }
  )
    .then((res) => {
      console.log(res);
      return res.json();
    })
    .then((apiResponse) => {
      console.log(apiResponse);
    });
});

2. 避免前端暴露API密钥 #

你当前的代码直接把access_key写在前端源码中，任何人都能轻易获取并滥用你的API配额。正确的做法是：

• 搭建后端服务（如Node.js、PHP等），由后端发起API请求
• 前端仅调用自己的后端接口，通过后端转发请求并返回结果

3. 临时绕过浏览器限制（仅本地调试用） #

如果必须调用仅支持HTTP的API，可临时修改浏览器安全设置，但绝对不适合生产环境：

• Chrome：地址栏输入chrome://flags/#allow-insecure-localhost，启用"允许不安全的localhost"选项
• Firefox：在about:config中设置security.mixed_content.block_active_content为false

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