Electron + Vue API 请求落到 app://

Posted 2023-03-22

【中文标题】Electron + Vue API 请求落到 app://

【英文标题】：Electron + Vue API requests fall to app://

【发布时间】：2021-03-26 19:06:36

【问题描述】：

我已经构建了一个 Vue 应用程序并在其中添加了 Electron。我用Vue CLI Plugin 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:// 开头的 url 路径包括 API 请求。

我的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，同时像往常一样打开我的所有文件（通过应用协议）

【参考方案1】：

嗯，已经有更长的时间了，我自己应付了。但是，这是我在一些论坛上为那些正在努力解决同样问题的人提供的答案：

首先，我修改了我的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');

结果，我的所有请求都被重定向到我的服务器。

原谅我不知道出处，如果代码的作者在看这个，你一定可以在cmets中标记自己:)