vue跨域问题

本地调试

可以通过在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>