前端引入第三方js跨域问题，如何解决？

Question

引入第三方js跨域问题，如何解决？

项目中引入了“天地图”js库，

const script = document.createElement('script')// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=' + config.tianMapKeyscript.onload = this.initEcharts.bind(this)document.head.appendChild(script)

但是自己的站点是“https”协议，发布站点后，发现请求的库里面重定向到了“http”开头的地址，导致引入该库报错，导致无法使用天地图，

演示：

访问官方demo：http://lbs.tianditu.gov.cn/api/js4.0/examples.html

打开f12，你能看到都是重定向（307）的http，哪怕你把例子中的http改成https也一样

Answer 1

纠正一点，这不是跨域，是属于 内容安全策略 中的 混合内容。

如果对方站点只有 http 资源，那没办法，你只有自己在后端或者网关上像类似于跨域那样，使用反向代理来获取。

但是，这个网站看起来是有 https 的，你直接把 URL 里面的 http 换成 https 就好了啊，试了一下用 https 是可以访问的。

• 混合內容 - Web 安全 | MDN