img.onload()失败 — 跨域、promise、canvas

1. 问题描述：

测试环境项目可以正常运行，生成环境img.onload()失败，导致canvas不能合成图。

2. 测试环境配置

BASE_URL:

https://api-zepeto-beta.kajicam.com/zepeto/activity/photo/api

CDN_PREFIX:

https://test-img.xiaoban.ren/

3. 生产环境配置

BASE_URL:

https://api-zepeto.kajicam.com/zepeto/activity/photo/api

CDN_PREFIX:

https://zepeto-android.kajicam.com/

4. H5在崽崽App内报错信息

Event {isTrusted: true}
isTrusted: true
__proto__: EventPrototype

5. 代码

loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.crossOrigin = 'anonymous'
    img.onload = (res) => {
      resolve(img)
    }
    img.onerror = (err) => {
      errMsg({text: '图片加载失败，请检查网络'})
      reject(err)
    }
    // img.src = src;
    img.src = src + "?v=" + Date.now() // 不加时间戳会报错
    console.log('img.src:', img.src)
    if(img.complete) {
      resolve(img)
    }
  });
}

6. 解决思路与办法：

1. 仅将接口域名和图片CDN前缀，由测试环境的修改为生产环境的，项目便不能运行了，图片在浏览器上可以正常访问显示，所以假设两个环境配置不同。
2. 找运维同学协助对比两个环境的配置，提供报错信息和H5这边不同环境的配置信息。（找人帮忙描述清楚问题，提供充足信息）
   

7. 加餐，load图片报403，因为OSS开启了白名单

var img = new Image()
img.src = 'https://zepeto-android.kajicam.com/zepeto/activity/photo/template/1582627064503.png?v=10';
img.onload = function() {
  console.log('img load suc');
}
// 在浏览器中执行该段代码，报403

var img = new Image()
img.src = 'https://zepeto-android.kajicam.com/zepeto/activity/photo/template/1582627064503.png';
img.onload = function() {
  console.log('img load suc');
}
// 在浏览器中执行该段代码，报403

var img = new Image()
img.src = 'https://test-img.xiaoban.ren/zepeto/activity/photo/template/1582543651956.png';
img.onload = function() {
  console.log('img load suc');
}
// 在浏览器中执行该段代码，报403

结论：

load图片报403错误，原因是OSS开启了白名单。

8. OSS配置备忘

h5-activity-beta, h5-activity-prod, xiaoban.ren 默认关闭了白名单和设置了允许跨域。