美文网首页
koa 跨域获取image src 的资源

koa 跨域获取image src 的资源

作者: ZOYA_MOLA | 来源:发表于2019-11-13 15:24 被阅读0次

我们知道 每一个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'), {})
)

相关文章

  • koa 跨域获取image src 的资源

    我们知道 每一个image标签的src属性 会向服务器发送一次资源请求,那么当要获取的资源是另外一个服务器(其他域...

  • 你不知道的HTML

    [TOC] 利用image测试网速 , 上报数据 对于img标签 , 它的资源是可以跨域的 , 通过src特有的属...

  • 客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详

    前后端框架(本例中是vue和koa)如何发送请求?获取响应? 以及跨域问题如何解决? vue部分: koa部分: ...

  • Koa代理Http请求

    Koa 代理http请求,解决跨域问题 1、为什么用Koa做跨域代理? "最初为了解决跨域问题,我把站点部署到了n...

  • 浅谈跨域劫持

    关闭页面特效 本篇文章主要讲解一下跨域攻击: Jsonp劫持 Flash跨域劫持 CORS跨域资源获取 -----...

  • 后端代理解决资源跨域

    canvas 跨域问题 如果canvas中所绘制的Image或者资源有跨域,则对canvas中的数据进行操作往往会...

  • koa设置跨域访问以及跨域验证cookie

    环境 后端框架: koa2 前端请求框架: axios 解决跨域访问 koa加上如下代码: 解决跨域验证cooki...

  • 跨域

    跨域:ajax 不能跨域img css script 标签 可以跨域例如:《img src="images/...

  • 几种跨域方案

    (一)JSONP 先明确一点:浏览器只是阻止了通过 AJAX 技术跨域获取资源,而并没有禁止跨域获取资源这件事情本...

  • Jsonp的实现原理

    1. Jsonp Jsonp: 主要是用来获取跨域的请求,由于同源策略的限制,我们不能获取跨域的资源 2. Jso...

网友评论

      本文标题:koa 跨域获取image src 的资源

      本文链接:https://www.haomeiwen.com/subject/slohictx.html