前端引入第三方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.tianMapKey
script.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

Answer 2

增加一个反向代理，如楼上所说的

server {
   listen       80;
   server_name  www.xxxx.com; # 你的域名
   location ~ /tianditu {
       proxy_pass  https://api.tianditu.gov.cn  # 要代理到地方
   }
}

实际使用

const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
// /tianditu为nginx代理目标
script.src = '//www.xxxx.com/tianditu/api?v=4.0&tk=' + config.tianMapKey
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)

Answer 3

楼上说的对，不是跨域，是协议问题。

不过考虑到 JS 的特殊性，反代一下就可以，不影响使用。如果自己有服务器，可以配置 nginx 之类的来实现，否则，可以考虑用 CF 等支持边缘计算的云平台，可以参考我的这篇博客，一行代码即可：

使用 CloudFlare 突破图片防盗链