https中js请求http资源报错解决方案

老吴2018-09-16 22:11笔记4837浏览


版权声明:本篇文章为原创文章,转载请注明出处。https://yao2san.com/article/1330

场景:

在使用一个音乐播放器插件时,在本地运行完全没问题,但是放服务器上无法加载歌曲列表,报错如下:

xxx was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint

大意:xxx使用了https,但是请求了一个不安全的节点。

分析:

本地环境是http,而服务器是https的,在https站点里使用js请求http资源是不允许的,这就导致无法加载歌曲列表。

解决方案:

百度到的又说加<meta>的,有说使用Jsonp跨域的(这和跨域有什么关系?),在这里都不好使。

除此之外,可能会想到,直接将请求地址使用https不就好了嘛,似乎没什么问题,但是前提是要请求的服务器或者说请求的接口地址支持https。

遗憾的是本次使用的接口地址并不支持https。

所以在百度过程中,收到某一个评论的启发,可以这样做:

将请求的接口通过自己的服务器端再封装一次,由服务器请求http接口地址,再将数据返回。这样肯定是可以的,只是比较麻烦。但是也是唯一的解决办法。

封装过程比较简单,只是使用java去请求接口地址即可。

封装的Controller如下:

    @ResponseBody
    @RequestMapping("/music/getMusicList")
    public Object playList(int id) throws IOException {
        String url = "http://120.79.36.48/playlist/detail?id="+id;
        System.out.println(url);
        RestTemplate restTemplate = new RestTemplate();
        Object res= restTemplate.getForEntity(url,Object.class).getBody();
        return res;
    }
    @ResponseBody
    @RequestMapping("/music/getMusicUrl")
    public Object music(int id) throws IOException {
        String url = "http://120.79.36.48/music/url?id="+id;
        System.out.println(url);
        RestTemplate restTemplate = new RestTemplate();
        Object res= restTemplate.getForEntity(url,Object.class).getBody();
        return res;
    }

点击右下角旋转的圈圈,就可以播放我的网易云歌单里的歌啦。(现已取消)

赞一个! (15)

文章评论(如需发表图片,请转至留言)