请求加载axios脚本遭拒：违反Content Security Policy指令问题咨询

问题原因 #

当前页面的Content Security Policy（CSP）指令script-src 'self'仅允许加载同源脚本，你尝试加载的https://unpkg.com/axios/dist/axios.min.js属于外部第三方资源，因此被拦截。由于未显式设置script-src-elem指令，浏览器会自动使用script-src作为 fallback 规则进行校验。

解决方案 #

你可以通过以下几种方式解决这个问题：

• 将axios脚本下载到本地作为同源资源加载
  把axios.min.js下载到你的项目目录中，通过相对路径引入，示例代码：

  <script src="/assets/js/axios.min.js"></script>
  

  这种方式完全符合script-src 'self'的规则，无需修改CSP配置。

• 修改CSP配置，允许加载unpkg域名的资源
  如果必须使用CDN资源，需要在CSP的script-src（或单独设置script-src-elem）中添加https://unpkg.com域名：
  调整后的CSP指令示例：

  script-src 'self' https://unpkg.com;
  

  或者显式指定script-src-elem：

  script-src 'self';
  script-src-elem 'self' https://unpkg.com;
  

  注意：修改CSP配置需要在服务器端（如Nginx、Apache）或页面的<meta>标签中操作，具体取决于你的部署环境。

内容的提问来源于stack exchange，提问作者Shihab Fms