利用nodejs解决浏览器Mixed Content限制

353 阅读1分钟

今天来谈谈在以前开发中遇到的一个问题和我的解决方案。

场景:

一次开发中,我们的站点是https的,在获取对方提供的票据图片时后端同学直接去拿到图片地址转发给前端, 但是没注意到是http资源,结果就是控制台报了一段错误:

    Mixed Content: The page at 'https://XXX.XXX.com/main' was loaded over HTTPs, but reauested an
    insecure XMLHttpReguestendpoint 'http://xxx.xxx.edu/xxx.jpg', This request has been blocked; the content must be served over HTTPS.

总的来说就是由于浏览器的安全策略阻止了https站点加载http资源,我们可以尝试在html的head中加入

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

上边加入的meta标签的作用是把http资源自动升级为https资源,但是如果内容提供方不支持https访问怎么办?

在控制台报错信息题到了Mixed Content,这里是关于mixed content的解释,大概意思就是https站点会阻止加载http的资源。

解决办法:

我们的前端框架集成了node服务(expressjs),为了不麻烦后端同学,我决定用nodejs去做代理,nodejs访问http资源不会触发浏览器安全策略,于是问题就好办了:

nodejs代码

...其他代码...
const http = require('http');
...其他代码...
app.get('/img_proxy', (req, res) => {
    const { url } = req.query;
    http.get(url, resData => {
        resData.pipe(res);
    });
});
...其他代码...

用http模块请求回来的resData和res都是stream,我们只需要使用Readable的pipe方法将resData导入res中就可以了,一切ok