electron打包后 图片 文件跨域问题

最新推荐文章于 2025-03-24 08:56:23 发布
最新推荐文章于 2025-03-24 08:56:23 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： js electron 文章标签： electron javascript html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45410804/article/details/120158166
版权
本文介绍了如何处理使用Electron框架打包的应用在加载阿里云图片时遇到的跨域问题。通过在主进程的配置文件（如background.js或main.js）中设置webPreferences的webSecurity为false，可以禁用同源策略，允许加载跨域资源。同时，这也会启用allowRunningInsecureContent，使HTTPS页面能够运行HTTP资源。这种方法对于开发和测试阶段非常有用，但在生产环境中需要谨慎处理安全问题。

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

electron打包后 图片（阿里云）跨域问题

在进程js配置文件中background.js 或者 main.js中 配置
mainWindow = new BrowserWindow({
    webPreferences: {webSecurity: false},
  })

一行代码注入灵魂

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

2.allowRunningInsecureContent Boolean (可选) -允许一个 https 页面运行 http url
里的资源，包括 JavaScript, CSS 或 plugins. 默认值为 false.

使用electron打包客户端，页面里面打开浏览器会被截断地址问题
qq_39141511的博客
12-28 991
先上处理方法 目前一共有两种： // 拦截<a>标签打开新浏览器窗口 / window.open //以浏览器方式打开，拼全地址 win.webContents.on("new-window", function(event, url, fname, disposition, options) { // 拦截url调用外部浏览器打开 exec(`startr ${url}`); event.preventDefault(); shell.openExternal(
Electron系列 -- vue项目嵌套electron打包成桌面应用(上)
m0_71071209的博客
07-11 1949
是一个生成图标的包安装package.json 中配置命令},执行命令, 生成icon完成后会在根目录多出来一个build目录在vue.config.js 中, 也要将路径进行调整删除原来的，重新打包，安装后就是新图标了。
关于electron的跨域问题，有本地的图片的地址，访问不了本地的图片
weixin_33824363的博客
06-29 2212
项目中有上传图片功能，自定义input type=file 改变透明度和超出部分隐藏，把按钮和 点击的图标放在上传文件的按钮上面，然后又碰到到获取input里面的图片的本地的路径， 在electron就是不能跨域访问本地，如何解决呢： 百事不得其解，问了我们项目的老大，说是electron的跨域问题，改变如下 webSecurity webPreferences:{nodeIntegratio...
electron线上跨域问题
最新发布
记录工作
03-24 468
【代码】electron线上跨域问题。
electron打包后网络请求失败
qq_36316660的博客
04-27 4971
本地服务的接口是http://xxx.xx.x.xxx:xxxx/接口名，而electron打包后的接口是app://接口名。本地项目运行的话，会报错跨域了，如果只追求打包项目能运行的话，可以这样做。（2）同时，还要将主进程background.js的webPreferences属性设置为false，允许跨域。而在项目中我们因为要访问后端接口，统一进行了跨域代理的处理，这是网络请求失败的主要原因。（1）将项目中所有网络请求，都替换为全路径url，如下图所例。--------------成功解决。
electron-vue下解决请求跨域方法
PolarisWay的博客
02-06 3157
electron-vue项目解决跨域
electron 跨域通信
weixin_34034261的博客
05-05 1802
案发现场 背景 electron 相信大家并不陌生，很多应用都是通过 electron内嵌了一个盒子，生成客户端，这导致electron 和html页面通信极其困难，并且ipcRenderer，ipcMain 和webContents.send并不好用。这时候，骚操作出现了！ 解决办法 'use strict'; const APP = { version: "1.0.0", ...
electron在windows打包遇到的坑纪录
01-07
1.解决跨域的问题 之前是使用后端解决跨域的，但是现在条件不允许，所以要使用前端进行跨域 第一种方法： const server = new WebpackDevServer( compiler, { contentBase: path.join(__dirname, '../'), quiet...
vue3 引入Electron 并实现打包exe可执行文件
weixin_41463944的博客
04-30 993
vue3 引入Electron 并实现打包exe可执行文件
vue3项目使用Electron打包成exe的方法与打包报错解决
梦翼横空的专栏
06-20 1654
解决：打开cmd 执行 npm config edit。2.在vue项目根目录新建文件index.js。3.package.json文件编辑。将vue3项目打包成exe文件方法。打开配置文件 粘贴以下内容。1.安装electron。
Vue打包后访问静态资源路径问题
12-13
我们发现运行npm run start后本地图片路径是没问题的，但是打包上传后会怎么样呢？ 我们知道，执行npm run build 后会生成dist文件夹，把里面的index.html在浏览器运行会发现 图片路径出错啦！！！ 解决方法： 1.先...
在electron中实现跨域请求，无需更改服务器端设置
zhichaosong的博客
04-10 5511
很简单，在Electron的BrowserWindow模块中配置这样一个参数： // Create the browser window. mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, webSecur...
electron提供sdk给远程web页面达到复制图片的功能，web页面提供一个按钮点击后将图片复制到剪切板用户可以直接黏贴
Zq
01-29 698
/* 使用.vue */ <template> <img :src="newSrc" ref="img" /> </template> <script> import { isSupport, copyImgUrl, copyImg } from "@/utils/electronEx"; export default { name: "electronImgCopy", computed: { newSrc(){ .
Electron打包过程
有财的博客
05-27 307
1、安装electron-builder npm install electron-builder --save-dev 2、在项目的package.json文件中配置 electron-builder相关参数 具体参数可以参考官方文档:https://www.electron.build/configuration/configuration 下面贴出我自己的配置: { "name": "electron-quick-start", "version": "1.0.0", "de
后端已解决跨域，electron+axios前端跨域问题
gushen_i的博客
08-16 571
后端已经配置了同源策略，添加了请求头 Access-Control-Allow-Origin 为 * ，但是前端仍然被跨域阻止
electron-vite如何解决跨域问题
weixin_60523038的博客
06-06 1549
electron-vite项目如何解决跨域问题
electron 嵌入网页跨域问题正确解决姿势
ArturiaTop的博客
06-07 3167
无需设置 webPreferences.webSecurity = false，使用 protocol.registerHttpProtocol 实现，网页请求全部发向 http://api.fetch 再转至对应后台。
electron跨域配置
北冥の魚
09-02 5224
我们在使用 electron 时，有时候接口本身是有跨域的，而 electron 本身默认是禁止跨域请求的 网上有文章提出在 .electron-vue 文件夹中的dev-runner.js里增加代理 const server = new WebpackDevServer( compiler, { contentBase: path.join(__dirname, '../'), quiet: true, proxy: {
electron-vue在开发环境中跨域请求代理配置(亲测有效！！！)
DLGDark的博客
10-16 5826
文件位置：项目 .electron-vue——dev-runner.js，添加proxy即可，target换成自己项目的请求地址即可。直接上代码： const server = new WebpackDevServer( compiler, { contentBase: path.join(__dirname, '../'), quiet: true, + proxy: { + // 配置整个项目请求代理，不用区分
electron+vue项目打包后出现的iframe跨域
09-06
在 Electron Vue 项目中，当我们使用 iframe 标签来嵌入其他网页时，有时会出现跨域问题。这是因为 Electron 应用默认是禁止跨域请求的，为了解决这个问题，我们可以进行以下操作： 1. 在项目的主进程中的 main.js 文件中，添加以下代码来启用跨域请求： ```javascript const electron = require('electron') electron.webContents.allowRendererProcessReuse = true app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors') ``` 这样，我们就可以解决 electron 的跨域请求问题。 2. 如果还是无法解决跨域问题，我们可以在 vue.config.js 文件中进行配置。在 devServer 配置下增加以下代码： ```javascript devServer: { proxy: { '/api': { target: 'http://localhost:3000', ws: true, changeOrigin: true } } } ``` 这样，在开发环境下，我们将所有以 '/api' 开头的请求都代理到我们指定的 target 地址上，解决跨域问题。 3. 如果以上两种方法都无效，我们还可以在 Electron 的主进程中使用 session 来禁用 webSecurity，代码如下： ```javascript const { app, BrowserWindow } = require('electron') app.on('ready', () => { const mainWindow = new BrowserWindow({ webPreferences: { webSecurity: false } }) }) ``` 这样，我们就可以通过禁用 webSecurity 来解决 Electron 的跨域问题。 需要注意的是，这些解决方法只适用于开发环境和本地调试阶段。在最终打包发布 Electron Vue 项目时，需要遵循 Electron 的安全策略，并且谨慎处理跨域问题，以确保项目的安全性和稳定性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值