koa 跨域获取image src 的资源

我们知道 每一个image标签的src属性 会向服务器发送一次资源请求，那么当要获取的资源是另外一个服务器（其他域名）的静态资源，事情就变得难搞了，经过一番搜索，获取了http-pxory-middleware 这个神器。

const Koa = require('koa')
const path = require('path')
const views = require('koa-views')
const router = require('koa-router')()
const httpProxy = require('http-proxy-middleware')
const k2c = require('koa2-connect') //神器，使得express和http的中间件可以在koa完美运行
const app = new Koa()

// 加载模板引擎
app.use(
  views(path.join(__dirname, 'src/views'), {
    extension: 'ejs'
  })
)

// 引入公共html页面（骨架）
router.get('/', async ctx => {
  let title = 'MideaCloud'
  await ctx.render('index', {
    title
  })
})

app.use(async (ctx, next) => {
  if (ctx.url.startsWith('/image')) {
    //匹配有image字段的请求url
    ctx.respond = false // 绕过koa内置对象response ，写入原始res对象，而不是koa处理过的response
    await k2c(
      httpProxy({
        target: 'http://127.0.0.1:5001', //be proxied server 
        changeOrigin: true,
        secure: false
      })
    )(ctx, next)
  }
  await next()
})

app.use(router.routes())

let host = '127.0.0.1'
let port = 8001
app.listen(port, host, () => {
  console.log(`服务运行在http://${host}:${port}`)
})

btw 亲测 koa 的koa-proxy-middleware 无效。。。 建议有这个需求的亲合理避雷

补充一下： ejs里面是酱紫的

<image src="image/zoya/littleGilr.jpg">

然后这个/image/ 前缀的 src 指向的就是你要去获取的服务器的资源啦

再补充一下：if you 喜欢 html 页面 不喜欢ejs 如下

// 加载模板引擎
app.use(
  views(path.join(__dirname, 'src/views'), {})
)