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

发布时间 2023-12-22 15:29:24作者: 颜色不一样的烟火

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控制台是看不到所发出的请求的,对于调试可能会不方便