在网站开发时，经常要调用第三方api（比如百度统计api，对站点访问量等信息进行统计），碰到跨域cors问题，如果有后端服务解决起来就比较简单了，但本文要说的是没有后端服务的情况该如何解决。

一、开发环境

根据使用前端框架不同，在vue.config.js或config\index.js的devServer或dev中添加proxy或proxyTable，归根结底，都是在devServer中添加proxy：

注意secure的值，我的情况是http站点调用了https的api，此处如果设置为true，会导致检查证书时找不到而报出500的错误，设置为false就没问题了。

按以上设置好以后，直接按以下方式使用即可，比如：

原api的调用方式为：

axios.get('https://openapi.baidu.com/rest/2.0/tongji/report/getData?access_token=xxxx)

设置后的api调用方式为：

axios.defaults.baseURL = "/bdapi";

axios.get(/rest/2.0/tongji/report/getData?access_token=xxxx)

二、生产环境

以上代理方式是不支持生产环境的，一般都是建议后端设置跨域，但是对于无后端服务页面该如何做呢，网上说可以使用jsonp的方式，本想用相关插件，比如npm的jsonp或vue-jsonp，但感觉文档太少，按网上说的设置后也不好用，于是干脆直接手撸了。

先定义一个全局回调函数：

调用前先删除已存在的script标签，每次想调用api时通过插入script即可发起请求。

但貌似jsonp这种方式不是太推荐了，还有可能第三方api不支持jsonp，以上百度统计按这种方式是没问题的。如果不支持的话，就得考虑换其他方法了，纯前端实在不行的话，那就不得不考虑加一个后端服务了。

#跨域##jsonp##前端开发##cors#

Tags：前端跨域解决方案

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。