qiankun微应用加载第三方js、sdk跨域报错

当我们在qiankun微应用,引入第三方js脚本时会产生跨域问题并报错,看qiankun的解释:常见问题 - qiankun

 qiankun会把静态资源的加载拦截,改用fetch方式获取资源,所以要求这些资源支持跨域。

虽然qiankun也提供了解决方案,但支持跨域的方式也颇为复杂,有没有更简单的方式,纯前端实现?

幸在qiankun提供了excludeAssetFilter  API 说明 - qiankun

解决方案:

步骤1 — 将资源写入主应用(基座) excludeAssetFilter 的放行规则里

步骤2 — 将资源加载方式改为动态加载

假如,我们需要加载的第三方脚本链接是 https://xxxx.yyy.com/sdk/xxx-1.0.0.js

 可以在如下主应用里通过定义白名单脚本链接 whiteList ,直接放行该脚本。

 当我们需要放行的第三方脚本越来越多,需要在 whiteList 里人工添加需要放行的脚本链接,后续维护成本高。

可以通过制定一个协议,如下,协议关键字 _custom-exclude_=MAIN

微应用里需要放行的资源,开发者自行在链接上带上放行协议关键字即可。一劳永逸。

start({
  prefetch: false,
  excludeAssetFilter: assetUrl => { // 指定部分特殊的动态加载的微应用资源(css/js) 不被 qiankun 劫持处理
    // 自定义白名单链接
    const whiteList = ['https://xxxx.yyy.com/sdk/xxx-1.0.0.js', 'https://ccc.ttt.com/js/xxx-1.0.0.min.js']
    /**
     * 白名单协议:子应用下如需要放行动态加载的css/js资源,可以在链接上带上参数 _custom-exclude_=MAIN
     */
    const whiteWords = ['_custom-exclude_=MAIN'] // 白名单关键词:协议制定 _custom-exclude_=MAIN。
    if (whiteList.includes(assetUrl)) {
      return true
    }
    return whiteWords.some(w => {
      return assetUrl.includes(w)
    })
  },
  ......
})

 

子应用加载该脚本方式改为动态加载方式(可自行实现,或者直接使用示例代码)。
例如,新建如下文件
src/utils/loadScript.js

const loadScript = (url) => {
  let script = document.createElement('script')
  script.setAttribute('type', 'text/javascript')
  script.setAttribute('src', url)
  let head = document.getElementsByTagName('head')
  if (head.length) {
    head[0].appendChild(script)
  } else {
    document.documentElement.appendChild(script)
  }
}

loadScript('https://xxxx.yyy.com/sdk/xxx-1.0.0.js?_custom-exclude_=MAIN')  // 需要放行的脚本1
loadScript('https://ccc.ttt.com/js/xxx-1.0.0.min.js?_custom-exclude_=MAIN') // 需要放行的脚本2

src/main.js文件内引入上面的脚本即可

import '@/utils/loadScript'

 

 

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Uniapp中使用uni.uploadFile进行文件上传时,如果涉及跨域请求,可能会出现跨域报错。解决跨域问题的方法有以下几种: 1. 在服务器端设置允许跨域访问:在服务器端的响应头中添加Access-Control-Allow-Origin字段,允许指定的域名或通配符(*)进行跨域访问。 例如,在Node.js的Express框架中,可以使用cors库来设置允许跨域访问: ```javascript const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); // 处理文件上传的路由 app.post('/upload', (req, res) => { // 处理文件上传的逻辑 }); // 启动服务器 app.listen(3000, () => { console.log('服务器已启动'); }); ``` 2. 使用代理服务器:在uniapp的`config.js`配置文件中,可以配置一个代理服务器,将跨域请求转发到服务器端,从而避免跨域问题。 在`config.js`文件中添加以下代码: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', // 实际请求的接口地址 changeOrigin: true, pathRewrite: { '^/api': '' // 如果请求的接口路径有前缀,需要将其替换为空字符串 } } } } } ``` 然后,在uniapp中使用`uni.uploadFile`时,将请求的地址设置为`/api/upload`,例如: ```javascript uni.uploadFile({ url: '/api/upload', // 其他参数... }); ``` 这样,uniapp会将`/api/upload`的请求转发到`http://example.com/upload`。 3. 使用JSONP请求:如果服务器端支持JSONP跨域请求,可以将文件上传接口改为支持JSONP,并在uniapp中使用uni.request进行请求。 在服务器端将文件上传接口改为支持JSONP: ```javascript app.get('/upload', (req, res) => { const callback = req.query.callback; const result = { code: 0, message: '上传成功' }; const jsonpResult = `${callback}(${JSON.stringify(result)})`; res.send(jsonpResult); }); ``` 然后,在uniapp中使用uni.request进行请求: ```javascript uni.request({ url: 'http://example.com/upload', method: 'GET', dataType: 'jsonp', success(res) { console.log('文件上传成功', res.data); }, fail(err) { console.error('文件上传失败', err); } }); ``` 以上是解决Uniapp中使用uni.uploadFile跨域报错的几种方法,根据你的实际情况选择合适的方法进行处理。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值