问题概述
在使用 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 时就被拦截了。
评论区