将http加载自动改为https-优快云博客

在Vue项目中，为了解决http资源失效问题，作者在index.html中添加了`<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">`标签，以自动将http请求转换为https。然而，这导致了在Chrome和Firefox浏览器上项目无法正常加载，而IE浏览器则能正常显示。问题在于这些浏览器不支持以https方式加载http静态资源。了解到Content-Security-Policy（CSP）的作用是实现白名单制度，增强网页安全性后，作者注释掉该标签解决了问题。CSP可以通过HTTP头信息启用，并提供了相关链接进一步了解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个vue项目，遇到了一些问题，在这里记录下来：

在vue项目中，引入了一个外部的css样式，但是该样式是http的，在调试过程中发现该http链接已经失效，换成https就可以正常加载了。但是我不知道项目中是否还有其他的引入外部资源的链接，所以在index.html中加了一行meta标签：

<meta http-equiv ="Content-Security-Policy" content="upgrade-insecure-requests">

该标签的意思是将站内加载的资源自动将http转为https，这样就可以省事多了

接下来就是该部署项目了，我将打包好的项目放在服务器上，在谷歌，火狐浏览器上访问均是一片空白，但是在ie上却是加载出项目首页了（此时我对于IE的看法竟然有了转变^_^）。然后查找另外两个浏览器为什么显示一片空白，发现所加载的css与js文件全是通过https加载的，这就很纳闷了，在浏览器直接访问该静态资源（http）是可以的，也就是不能以https加载静态资源。想了半天，找了半天，才想起来是上面的meta标签的问题，将其注释掉就可以在谷歌和火狐正常访问了（此时我又开始鄙视IE了Ծ‸Ծ。。。）

好了，找到问题了，接下来就是上网看看“Content-Security-Policy”的作用是什么：

CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。