本地调试
可以通过在vue.config.js中配置devServer来实现跨域请求。
module.exports = {publicPath: './',productionSourceMap: false, // 生产环境是否生成 sourceMap 文件devServer: {proxy: {'/bi': {target: 'http://1.11.113.20:1234/bi', // 后台接口域名ws: false, //如果要代理 websockets，配置这个参数secure: false, // 如果是https接口，需要配置这个参数changeOrigin: true, //是否跨域}}},chainWebpack: config => {config.plugin('html').tap(args => {args[0].title = '';return args;})}
}
通过axios来请求接口
try {const res = await axios.get('/bi/Viewer?proc=1&action=viewer&hback=true&db=__MY_DB__!2f!!672a!!547d!!540d!-1.db&platform=PC&browserType=chrome?token=eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6Ijk5NjM5YzVjLWE1MGYtNGI5OC04NDBiLWQxMjdjMGZhY2JmZSJ9.OVdKHrp1sRoMLdPftxm1DCESqIUBRQspR0kvOvGGFR4YxYIaWTYLFuTtA0o2mvsYpVk5I5BO2ag448QR3YPrqg');console.log(res?.data);} catch (error) {console.error(error);}
项目发布后的跨域问题
需要运维配置ngnix，将前端域名和后端服务器映射起来。
嵌入外部网页，涉及跨域，单点登录
<iframe ref="iframe" class="iframeView"src="/bi/Viewer?proc=1&action=viewer&hback=true&db=__MY_DB__!2f!!672a!!547d!!540d!-1.db&platform=PC&browserType=chrome?token=eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjZiMDM1YjEzLWNkZTItNDc2ZC04YTliLTc1MjQxZDViOTc2ZiJ9.7TOj2ZkjpU3Iee-0t_MBdnPeK4ffm5KZmLBLbDxTieO4O_hqzENQ_G6SN0yY1CiyboADnjPKZ5Ur0oe4LSqzNA"frameborder="0" scrolling="auto"></iframe>
