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

Question

我构建了一个 Vue 应用程序并向其中添加了 Electron。我用了 Vue CLI Plugin Electron Builder

在开发模式下没问题，所有API请求都落在我写的地址vue.config.js:

proxy: {
        '^/api': {
            target: 'http://my-api:3000',
            changeOrigin: true
        },
    },

比如axiosPOST请求/api/open_session/根据需要降到http://my-api/api/open_session

当我构建项目时，它会创建一个 app:// 协议来打开 index.html 文件。

但它也使所有 url 路径以 app:// 开头，包括 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，同时像往常一样打开我的所有文件（通过应用程序协议）

Answer 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');

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

原谅我不知道出处，如果代码作者正在阅读本文，您一定可以在评论中标记自己:)

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

Electron + Vue API requests fall to app://

javascript

vue.js

electron

vue-cli

electron-builder