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

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