API是http协议的，从里面获取的内容在https页面上无法展示

Question

我的页面里的图片是使用这个API获取的：http://gank.io/api/data/%E7%A...'。在本地浏览成功。但是我把代码放到github上之后，打开这个页面却显示不了图片。页面地址是https协议的。

开发者工具打开报错如下：

Mixed Content: The page at 'https://helloqingfeng.github.io/vue2-demo/dist/#/gank' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://gank.io/api/data/%E7%A6%8F%E5%88%A9/50/1'. This request has been blocked; the content must be served over HTTPS.

请问这个怎么解决？有大神遇到过吗？

Answer 1

好像是提示请求必须是https？http好像被阻止了。你可以试试https呀。

Answer 2

上面的错误信息就是说你的github pages是运行在https上的，但是AJAX请求却通向了http（不安全）的链接。话说那个API服务器是您本人的吗？要是是的话，可以尝试一下改用https。现在也有免费的SSL证书提供商啦~

如果不是本人的API服务器的话，可以考虑一下自己架一个https服务器中转一下数据？（开销太大了吧……如果有的话我想你也不会用github pages了）

Answer 3

如果服务端接口无法升级成https,

前端可以考虑使用img标签来发get请求

function request(url){
          var img=new Image()
          img.src=url
      })
}