在Chrome中用JQuery从HTTP网站获取信息遇证书及混合内容错误求助

首先得明确：你遇到的是浏览器的混合内容安全限制，这是现代浏览器强制的安全规则——当你的页面是HTTPS协议时，浏览器会自动阻止所有HTTP协议的资源请求，也就是你看到的blocked:mixed-content错误。

你尝试的upgrade-insecure-requests CSP指令之所以没用，是因为它的作用是把页面里的HTTP请求自动升级为HTTPS，但目标网站的HTTPS本身就存在证书错误（NET::ERR_CERT_COMMON_NAME_INVALID），浏览器根本不信任这个证书，所以升级后的请求还是会失败，这个指令在这里完全起不到作用。

下面给你两个可行的解决方案：

1. 后端代理（生产环境唯一靠谱方案） #

前端浏览器的安全限制是绕不开的，所以最稳妥的方法是在你的后端服务器上搭建一个代理接口：

• 前端请求你自己服务器的HTTPS接口（和当前页面协议一致，不会触发混合内容限制）
• 后端服务器作为中间层，去请求那个HTTP的目标网站（后端不受浏览器的混合内容限制）
• 后端把目标网站返回的数据再转交给前端

举个Node.js + Express的简单示例：

const express = require('express');
const axios = require('axios');
const app = express();

// 代理接口，接收前端的请求参数
app.get('/proxy-website', async (req, res) => {
  try {
    // 后端发起HTTP请求到目标网站
    const targetResponse = await axios.get('http://t.websitexxx/', {
      params: req.query // 把前端的参数传递过去
    });
    // 将目标网站的响应返回给前端
    res.send(targetResponse.data);
  } catch (err) {
    res.status(500).send('代理请求失败，请检查目标网站是否可访问');
  }
});

app.listen(3000, () => console.log('代理服务已启动在3000端口'));

然后前端修改请求地址，指向自己的代理接口：

$.ajax({ 
  url: "/proxy-website", 
  type: "get", 
  async: false,
  data: { /* 你要携带的参数 */ }
});

2. 开发环境临时绕过（仅用于本地测试） #

如果只是自己本地开发测试，可以修改浏览器设置来临时关闭混合内容限制，但绝对不能让生产环境的用户这么做：

• Chrome浏览器：在地址栏输入chrome://flags/#allow-insecure-localhost，启用该选项；或者用命令行参数chrome.exe --allow-running-insecure-content启动浏览器
• Firefox浏览器：在地址栏输入about:config，找到security.mixed_content.block_active_content，设置为false

最后要提醒：前端层面没有任何合法的方法能绕过浏览器的混合内容安全限制，这是为了保护用户的安全，所以后端代理是生产环境的唯一选择。

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