首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue3.0 微应用数据请求跨域配置

vue3.0 微应用数据请求跨域配置

作者头像
copy_left
发布2020-11-13 14:38:18
9150
发布2020-11-13 14:38:18
举报
文章被收录于专栏:方球方球

背景

当前存在以vue2.6 开发的单例应用, 我们希望使用qiankun ,将该应用转微应用结构。

在保证原功能可用的情况下,使用vue3.0重构部分功能。

这里记录使用vue做微应用开发时,各个应用数据请求代理的配置方式.

目录

  • root
    • app-base // vue 2.6.12
    • app-1 // vue 3.0.2

问题

我们知道一般,独立使用vue开发单例应用,可以通过配置 vue.config.js{ devServer: proxy } 实现接口请求代理.

而在微应用开发中,情况稍有不同。 具体的可以分为以下几种情况:

  1. 基座独立开发代理
  2. 子应用独立开发代理
  3. 子应用嵌套基座内的代理

现在的问题是,当基座和子应用各自独立配置代理服务时,各自独立开发请求数据是正常的。

而子应用加载到基座后,子应用的数据请求将为404

基座代理

基座版本vue2.6.12,

// vue.config.js
{
  devServer:{
    port: 9000,
     publicPath: "/"
     proxy: { // 代理配置
      '/proxyApi': {
        target: 'https://api-service.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/proxyApi": ''
        }
      }
    }
  }
}

子应用代理

// vue.config.js
{
 devServer: {
    disableHostCheck: true,
    port: 9030,
    hot: true,
    overlay: {
      warnings: false,
      errors: true,
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {  // 代理配置
      '/proxyApi': {
        target: 'https://api-service.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/proxyApi": ''
        }
      }
    }
  },
  publicPath: `http://localhost:${micro.port}/`,
}

分析

初看这里微应用中的代理配置和单例配置没有任何区别.其实代理的配置基础都是基于vue.config.js配置或者说是 webpack代理配置, 之所以 这里子应用无论独立开发或加载到基座联调,都能正常请求到数据,是因为基座和子应用都配置了相同的代理头 /proxyApi 并且请求的服务地址一致

这里回到问题, 如果基座和子应用独立配置, 例如:

子应用独立开发时的请求地址: /user

当子应用嵌套在基座内时,地址将变为: localhost: 9000/user

可以看到请求地址发生了变换,原/user 地址在独立开发时是能通过webpack server 做正常代理的.

而在微服务中, /user 地址转向了基座的本地开发服务 localhost:9000/user 而开发服务是无法识别这个请求地址的,自然返回404

所以我们将子应用的代理头与基座同步, 这样子应用的请求将通过基座的开发服务做代理转发, 之所以设置相同的代理头而不是在基座再配置一遍子应该代理,也是为了方便设置,遵循约定大于配置 原则。

其他方法

固定baseurl

之前的方法请求的baseurl 都为先对请求地址, 其实我们也可以直接设置完整的请求地址。

例如:axios.create({ baseURL: 'https://www.api-service.com'})

这样子应用的请求地址将不会被改写, 也就不会出现404 的情况。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 目录
  • 问题
  • 基座代理
  • 子应用代理
  • 分析
  • 其他方法
    • 固定baseurl
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档