vue跨域问题

最新推荐文章于 2024-10-05 01:22:45 发布

夏与冰

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量280

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_35641191/article/details/141070474

版权

本地调试

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