问题概述

在使用 Electron + Vue3 + axios 开发时，axios 网络请求被拦截，无法正常发送请求。

根据报错提示发现是内容安全策略（Content Security Policy, CSP）出现的问题。

这表明当前的网页设置了内容安全策略，限制了可以加载的资源。具体来说，default-src 'self' 表示只有同源的内容（即与当前页面相同的域名）可以被加载。由于我尝试连接的 URL 不在允许的源列表中，因此被拒绝。

解决方法

那么我们只需要让想要发送的请求接受要发送的 URL 即可。

具体操作方法是将 Electron 根目录下的 html 文件中的默认 CSP 配置换为以下策略即可：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' https://your_url">

问题反思

在之前用 Vue 开发时并没有遇到这个问题，但是相同代码在 Electron 中就出现了问题。发生这样的情况是因为 Vue 在 html 文件中不仅没有 CSP 配置，而且有脚手架的代理，因此可以正常发送请求。

但是 Electron 不仅没有现成的代理设置，还加上了 CSP，所以用 axios 时就被拦截了。