electron的渲染进程使用axios时被csp安全拦截的解决方案

最新推荐文章于 2024-05-06 17:12:07 发布
最新推荐文章于 2024-05-06 17:12:07 发布
阅读量843 收藏 7
点赞数 10
文章标签： electron javascript 前端 ecmascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013687509/article/details/135206700
版权

1、问题出现场景

　　脚手架用的是electron-vite，渲染进程是vue3+pinia+vue-router，http请求是使用的axios，在发起请求时发现控制台报csp问题

　　

　　

2、原因分析

　　csp其实就是跨域问题，不支持非同源的资源访问，以往开发普通的vue项目时因为有脚手架里的代理，所以不会出现这种问题，而electron没有现成的代理配置

3、解决方法

　　这里介绍两种解决方案

　　1、最简单直接的方法是修改渲染进程的html页面的csp规则，下面是我的大致设置，主要是connect-src，这是http请求的资源策略，保留self同源，另外增加自己具体的接口服务地址。

　　具体参考文档https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP

　　

　　2、第二种是替换axios的默认适配器，在预加载脚本preload里边引入

　　

　　然后用contextBridge暴露给渲染进程

　　

　　然后渲染进程里边在创建axios实例前将它设置为默认http适配器

　　

　　这样axios请求就可以发送了，但是由于这是相当于用的node的http请求，所以这种方式下，你在调试渲染进程时在控制台是F12控制台是看不到所发出的请求的，对于调试可能会不方便

JBZ321
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Electron常见问题 41 - blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains
liuzhen007的专栏
11-05 1734
目录 问题 解决 问题 Electron新建一个BrowserWindow窗口，加载URL地址，提示如下报错： Access to fetch at 'https://sentry.boom.cn/api/5/store/?sentry_key=b2dff9e…&sentry_version=7' from origin 'https://client-test.baijiayun.com' has been blocked by CORS policy: The 'Access-.
electron渲染进程和渲染进程通信
01-25
标题中的“Electron渲染进程和主进程通信”指的是在Electron框架中，应用程序的两个主要组件——渲染进程（Renderer Process）和主进程（Main Process）之间的交互方式。Electron允许开发者使用Node.js API和Web技术...
♥♥突然理解了代理的用法==＞vue项目打包成桌面应用遇到的问题
09-07 547
序：写了一个证件打印系统（其实就是一个小demo????） vue3+electron 请求使用的axios ???? ps:就是在请求时出现了问题！！ 遇到的问题：在浏览器里面测试请求是没有问题的，使用electron打包后，请求404 百度了一堆只说明了一点：因为我在本地配置了代理，electron解析后的请求路径变成了file:///D:xxx/xxx/这种格式，正常应该是这样的：https://xxx 本地不配置代理又会遇到跨域的错误，所以根据环境做了判断： Vue.prototype.a
Electron axios token失效刷新token
最新发布
weixin_41521961的博客
05-06 235
在Electron中，localStorage仅在浏览器进程（渲染进程）中起作用， 这里axios请求需要使用electron-store来保存token。
electron中使用axios解决cors问题
fxtxz2的专栏
10-24 6021
场景 在electron中集成axios后，发现axios不能读取到set-cookie响应头，且axios也无法写入Cookie响应头。 原因 Chromium中不支持跨站访问HttpOnly的Cookie，electron有两种进程一个是主进程，一个是渲染进程，它的渲染进程就是Chromium的进程，主进程是是NodeJS的进程。electron是使用Chromium的进程来渲染界面的，故axios不能修改和读取Chromium中Cookie，因为服务器端设置HttpOnly。 思路 利用electro
【electron+axios】如何在electron中封装使用axios，从下载到使用保姆级教程
PolarisWay的博客
11-28 1570
如何在electron中封装使用axios，从下载到使用保姆级教程
如何在electron中使用 node环境的 axios（即发 http 请求而不是 xhr请求）
Wonder233的学习博客
08-16 2493
如何在 electron 中使用 node 环境的 axios
请求报错blocked:csp
Mr__proto__的博客
03-27 792
项目架构:electorn+react+axios。此报错是因为mate标签里写了如下代码。解决办法就是先把这段代码注释掉。代码用途是,防止跨域脚本攻击。
Electron进程间的通信，主进程与渲染进程之间的通信，渲染进程通过主进程与渲染进程之间的通信，渲染进程直接与渲染进程之间的通信
04-10
这个小Demo 实现了 Electron 程序 从0 开始搭建，没有用脚手架，实现了 Electron进程间的通信，主进程与渲染进程之间的通信，渲染进程通过主进程与渲染进程之间的通信，渲染进程直接与渲染进程之间的通信，几种实现...
electron主进程和渲染进程通信
01-24
介绍：https://blog.csdn.net/applek_Case/article/details/86622059
milagro-teste:使用vue.js，electron和axios进行项目
05-10
Teste-Milagro项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。 “＃teste-milagro”
Vue+Electron+Vue-router+Vuex+Axios+Element-UI全家桶开发模式编写前端展示与交互界面
10-20
Vue+Electron+Vue-router+Vuex+Axios+Element-UI全家桶开发模式编写前端展示与交互界面
关于node-bindings无法在Electron中使用的解决办法
10-17
今天小编就为大家分享一篇关于关于node-bindings无法在Electron中使用的解决办法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
【electron】【附排查清单】记录一次逆向过程中，fetch无法请求http的疑难杂症（net::ERR_BLOCKED_BY_CLIENT）
kinghzking的专栏
11-07 1669
electron很复杂，尤其是像本次遇到的问题，可以通过多种方式实现，所以我们需要一次次的尝试，排除错误答案，最终找到正确的解决方案。，将代码添加到目标进程的render中（如：app-bundle.js），这样我们就可以使用axios了，不过依然返回。虽然上面修正了fetch，但是依然担心fetch有问题，于是乎，尝试用第三方库axios测试。从上面的各种尝试中，我们可以看出，通过浏览器js各种失败，那么通过nodejs呢。，为了解决该问题，又遇到无数其它问题，特此记录，以敬后效。可是小编用的软件，在。
electron请求接口报错，meta标签设置csp安全策略问题
qq825871092的博客
07-06 610
如果直接去掉content中定义的内容安全策略，electron会报警告，因为从2.0版本开始，如果使用electron的开发人员没有定义Content-Security-Policy，Electron就会在DevTool console发出警告。因为没有在meta标签中定义connect-src所以采用默认的default-src的策略 因为设置成了’self’，所以这里请求的资源只允许同源的。该处的采用 任保留’self’ 再此基础上 加上指定域名的资源。
关于解决electron(简称安全警告csp): Electron Security Warning (Insecure Content-Security-Policy)的问题
weixin_46043645的博客
12-09 1457
关于解决 Electron Security Warning (Insecure Content-Security-Policy)安全警告是什么意思?我理解是:哪儿的文件都可以加载,这样是很不安全的.首先控制台会出现这样的安全警告: 以下示例。再去打开electron控制台就没。2.关闭electron窗口 重新运行。
ajax048472,jQuery.ajax（）由于WebExtension中的CSP而被阻止
weixin_34223525的博客
08-05 366
我正在开发一个Mozilla Firefox扩展，它需要与localhost上的服务器进行通信：8080。jQuery.ajax()由于WebExtension中的CSP而被阻止jQuery.ajax({type: query_method,url: "http://localhost:8080/item",data: item,dataType: "jsonp",success: functio...
blob图片资源被CSP拦截,无法在浏览器中加载
小小的心,有大大的梦的博客
08-02 7651
修改前nginx 中的配置: add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval';` 修改后nginx 中的配置: add_header Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-e...
electron-vue 跨域请求问题 报错‘Access-Control-Allow-Origin‘
u014226080的博客
01-15 951
当在使用electron-vue中使用axios进行请求的时候游览器直接报错 报错内容如下： Failed to load https://weread.qq.com/web/search/global?keyword=&maxIdx=0&fragmentSize=120&count=20: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://loc
electron 渲染进程之间通信
06-10
Electron 的渲染进程之间可以通过 IPC（Inter-Process Communication，进程间通信）方式进行通信。具体来说，可以使用 Electron 提供的 `ipcRenderer` 模块在渲染进程之间发送异步消息，也可以使用 `ipcMain` 模块在主进程中监听消息并回复。 具体操作步骤如下： 1. 在发送消息的渲染进程中使用 `ipcRenderer.send(channel, ...args)` 方法发送消息，其中 `channel` 为自定义的消息通道，`args` 为可选的消息参数。 2. 在接收消息的渲染进程中使用 `ipcRenderer.on(channel, listener)` 方法监听消息，`listener` 为消息处理函数，可以通过 `event.sender.send(channel, ...args)` 方法回复消息。 3. 在主进程中使用 `ipcMain.on(channel, listener)` 方法监听消息，`listener` 同样为消息处理函数，可以通过 `event.sender.send(channel, ...args)` 方法回复消息。 4. 在回复消息的渲染进程中使用 `ipcRenderer.on(channel, listener)` 方法监听回复消息。 需要注意的是，由于 Electron 的渲染进程是运行在 Chromium 的多个进程中的，因此需要使用 `webContents.getAllWebContents()` 方法获取所有渲染进程的 `webContents` 对象，再使用 `webContents.send(channel, ...args)` 方法向所有渲染进程发送消息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JBZ321

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值