Electron拦截webview里的接口重定向本地文件

webview 7 月前 0 2

关于这个问题,国内相关资料比较少,所以这里自己记录一下,也给其他被这个问题困扰的人提供一个思路。

&lt;body&gt;
    &lt;webview
      id="foo"
      src="http://xxxxx"
      style="display: flex; width: 100%; height: 1000px"
    &gt;&lt;/webview&gt;
  &lt;/body>

js 页面:

import { app,BrowserWindow,protocol,session } from 'electron'
import path from 'path'

app.whenReady().then(() => {
  const filter = {
    urls: ['http://xxxx/*'] // xxxx是你要拦截的地址
  }
  session.defaultSession.webRequest.onBeforeRequest(filter, (details, callback) => {
    // details.url返回的是上面filter.urls里需要拦截的所有接口
    if (details.url === 'http://xxxx') {
      callback({
        // redirectURL是你重定向本地的文件位置, atom是自定义的
        redirectURL: 'atom:///D:\xxxx\xxx\photo.jpg'
      })
     
    } else {
      callback({ requestHeaders: details.requestHeaders })
    }
  })
    
  // 这里的atom是上面自定义的名称
  protocol.registerFileProtocol('atom', (request, callback) => {
    const url = request.url.substring(8)
    callback(decodeURI(path.normalize(url)))
  })

})