vue打包部署后页面打不开，发现http请求变成https

发生过程：
功能开发完成之后打包发到线上发现页面打不开，于是看了网站上的报错，

图1.png

图2.png

主要是出现上图1和图2的问题，当时在想为什么会重定向成https.
经过不停的查找，终于发现是index.html里面的一行代码导致的，代码如下：

image.png

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">的作用解释:
该标签是一个HTTP头部等价物，用于在HTML文档中指定内容安全策略（CSP），upgrade-insecure-requests指令的作用是自动将页面上的所有不安全请求（如HTTP请求）升级为安全请求（HTTPS请求）,这有助于增强网站的安全性，防止中间人攻击和数据泄露
需要注意的是，正确的HTTP头部字段应该是Content-Security-Policy，而不是在<meta>标签中使用的http-equiv属性。但在<meta>标签的上下文中，使用http-equiv来模拟HTTP头部是一种常见的做法。然而，对于CSP来说，最佳实践是通过HTTP响应头来设置，因为并非所有浏览器都支持在<meta>标签中设置CSP,
所以最佳实践是服务器配置来设置CSP头部，而不是在HTML中。如果你使用的是Vue CLI构建的项目，并且部署在支持自定义HTTP头部的服务器上（如Nginx、Apache等），你应该在服务器配置中添加CSP头部

对Vue项目安全性带来的具体影响：

引入upgrade-insecure-requests指令后，Vue项目中的所有不安全请求都将被自动升级为安全请求。这有助于防止敏感数据在传输过程中被截获或篡改，从而提高项目的安全性。然而，这并不能替代其他安全措施，如使用HTTPS、验证输入、防止跨站脚本攻击（XSS）等。

下面是一个在Nginx中设置CSP头部的示例：

server {
    listen 80;
    server_name example.com;

    location / {
        # 其他配置...

        # 设置CSP头部
        add_header Content-Security-Policy "upgrade-insecure-requests";
    }

    # 其他配置...
}