javascript - Electron + Vue API 请求落到 app://
问题描述
我已经构建了一个 Vue 应用程序并向其中添加了 Electron。我使用了 Vue CLI 插件 Electron Builder
在开发模式下没问题,所有 API 请求都落在我写的地址上vue.config.js
:
proxy: {
'^/api': {
target: 'http://my-api:3000',
changeOrigin: true
},
},
例如,Axios POST 请求根据需要/api/open_session/
下降http://my-api/api/open_session
。
当我构建项目时,它会创建一个app://
协议来打开 index.html 文件。
app://
但它也使所有以包括 API 请求开头的 url 路径。
我的background.js
:
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
}
else {
createProtocol('app');
// Load the index.html when not in development
win.loadURL('app://./index.html');
}
我希望将这些路径定向到我的 API,同时像往常一样打开我的所有文件(通过应用程序协议)
解决方案
好吧,已经有更长的时间了,我自己应付了。但是,这是我在一些论坛上遇到的那些遇到同样问题的人的答案:
首先,我修改了我的vue.config.js
:
proxy: {
'^/api': {
target: 'http://127.0.0.1:3000',
changeOrigin: true
},
},
然后,我做了一些更改main.js
- 添加了一个会话变量:
const sesh = session.defaultSession.webRequest.onBeforeSendHeaders({
urls: ['*://*/*']
}, (details, callback) => {
// eslint-disable-next-line prefer-destructuring
details.requestHeaders.Host = details.url.split('://')[1].split('/')[0]
callback({
requestHeaders: details.requestHeaders
})
})
它定义了调用请求时应用程序的行为。此外,我还向 webPreferences 添加了会话值:
const win = new BrowserWindow({
width: 1500,
height: 700,
title: "Title",
webPreferences: {
session: sesh,
nodeIntegration: true,
webSecurity: false
}
})
最后,通过应用协议加载我的 index.html
createProtocol('app');
win.loadURL('app://./index.html');
结果,我的所有请求都被重定向到我的服务器。
请原谅我不知道出处,如果代码的作者正在阅读此内容,您一定可以在评论中标记自己:)
推荐阅读
- cmusphinx - g2p-seq2seq train 命令无限期运行
- ios - 导航栏隐藏推送视图高度差
- github - Colaboratory - access to private repository from github
- javascript - 排序 Apache SOLR 搜索结果 - 句子
- python - Python,将两个列表元素放在一起
- perl - perl 无法识别全局符号
- superset - Apache superset - 无法在 Macbook 中找到 Superset 文件夹
- java - 首先检查结果是否为null时如何避免冗余方法调用?
- r - 比较两个表之间的列类型
- xamarin - 使用单一代码库的不同组织的多个应用程序