wujie常见的报错

wujie在项目中的报错

请求资源报错

请求报错为：Access to fetch at *** from origin *** has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

原因： 子应用跨域或者请求子应用资源没有携带 cookie

解决方案：

如果是跨域导致的错误，参考前提
如果是求资源没有携带 cookie（一般请求返回码是 302 跳转到登录页），需要通过自定义 fetch 将fetch的credentials设置为include，这样cookie才会携带上去

警告

当**credentials设置为include时，服务端的Access-Control-Allow-Origin不能设置为***，原因详见，服务端可以这样设置：

1	ctx.set("Access-Control-Allow-Origin", ctx.headers.origin);

冒泡系列组件（比如下拉框）弹出位置不正确

原因： 比如element-plus采用了popper.js2.0 版本，这个版本计算位置会递归元素一直计算到window.visualViewport，但是子应用的dom挂载在shadowRoot上，并没有window.visualViewport这部分滚动量，导致偏移计算失败

解决方案： 将子应用将body设置为position: relative即可

线上部署获取静态资源报错

主应用通过代理访问子应用

'/extern': {
    target: 'http://10.60.44.251:9010',
    headers: {
      Host: `localhost:${PORT}`
    },
    logLevel: 'debug'
  }

子应用修改为相对路径访问静态资源

1	publicPath: './'

使用和主应用一样的路由模式

1
2
3

createRouter({
    history: window.__POWERED_BY_WUJIE__ ? createWebHashHistory() : createWebHistory()
})