electron跨域配置

最新推荐文章于 2025-04-20 00:30:39 发布

北溟の魚

最新推荐文章于 2025-04-20 00:30:39 发布

阅读量5.2k

点赞数 2

分类专栏：【★web前端开发】文章标签： electron vue.js javascript

本文链接：https://blog.youkuaiyun.com/kongcheng_001/article/details/120062261

版权

【★web前端开发】专栏收录该内容

14 篇文章

订阅专栏

当使用Electron并遇到接口跨域限制时，不能仅通过修改dev-runner.js设置代理来解决。在build后，接口请求变为file://格式。实际上，Electron允许禁用同源策略。只需在主进程中创建BrowserWindow时，设置webSecurity为false，即可解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在使用 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
}

就可以了