electron-vue项目开发下解决请求跨域方法
概要:一般在vue的项目下前端一般常见解决跨域的方法就是在vue.config.js下配置相关代码,但是在开发electron-vue的时候这种方法并不适用,不过原理大差不差。
electron-vue项目在启动时需要执行一个js文件(.electron-vue/dev-runner.js),项目启动的配置都在这个文件里,所以将代理的部分代码在dev-runner.js文件中进行配置
找到startenderer方法,在newWebpackDevServer的方法下添加如下代码片
代码如下:
const server = new WebpackDevServer(
compiler,
{
contentBase: path.join(__dirname, '../'),
quiet: true,
hot: true,
before (app, ctx) {
// app.use(hotMiddleware)
ctx.middleware.waitUntilValid(() => {
resolve()
})
},
proxy:{
"/api": {
//测试服务接口地址
target: "http://192.168.0.111:8080",
changeOrigin: true, // 允许跨域
pathRewrite: {
"^/api": "/"
},
headers: {referer: ''}
}
}
}
)
startRenderer整个方法完整代码如下:
function startRenderer () {
return new Promise((resolve, reject) => {
rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
rendererConfig.mode = 'development'
const compiler = webpack(rendererConfig)
hotMiddleware = webpackHotMiddleware(compiler, {
log: false,
heartbeat: 2500
})
compiler.hooks.compilation.tap('compilation', compilation => {
compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync('html-webpack-plugin-after-emit', (data, cb) => {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
compiler.hooks.done.tap('done', stats => {
logStats('Renderer', stats)
})
const server = new WebpackDevServer(
compiler,
{
contentBase: path.join(__dirname, '../'),
quiet: true,
hot: true,
before (app, ctx) {
// app.use(hotMiddleware)
ctx.middleware.waitUntilValid(() => {
resolve()
})
},
proxy:{
"/api": {
//测试服务接口地址
target: "http://192.xxx.x.xxx:8080",
changeOrigin: true, // 允许跨域
pathRewrite: {
"^/api": "/"
},
headers: {referer: ''}
}
}
}
)
server.listen(9080)
})
}