问题概述

在使用 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 时就被拦截了。