electron接口跨域解决

9,453 阅读1分钟

我们在使用 electron 时,有时候接口本身是有跨域的,而 electron 本身默认是禁止跨域请求的

网上有文章提出在 .electron-vue 文件夹中的dev-runner.js里增加代理

    const server = new WebpackDevServer(
      compiler,
      {
        contentBase: path.join(__dirname, '../'),
        quiet: true,
        proxy: {
          '/api': {
            // 请求的目标服务器地址
            target: 'https://xxx.xxx.xxx',
            // 设置允许跨域
            changeOrigin: true,
            secure: false,// 不验证 https
            // 重写路径
            pathRewrite: {
              '^/api': ''
            },
            headers: {
              referer: ''
            }
          }
        },
        before (app, ctx) {
          app.use(hotMiddleware)
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

这样在dev环境下是可以的,但是当我们 build 之后,发现接口请求都变成本地 file://xxx 形式的, 很显然这样不能用。

其实electron本身提供了同源策略设置,我们只需要修改一下配置就可以了

webSecurity Boolean (可选) - 当设置为 false, 它将禁用同源策略 (通常用来测试网站), 如果此选项不是由开发者设置的,还会把 allowRunningInsecureContent设置为 true. 默认值为 true。

我们只需要在主进程的 new BrowserWindow() 方法中添加

webPreferences: {
   webSecurity: false
}

就可以了