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

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

html页面:

id="foo"

src="http://xxxxx"

style="display: flex; width: 100%; height: 1000px"

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)))

})

夸智网