前端js css文件报错net::ERR_SSL_PROTOCOL_ERROR

项目部署无法使用域名，测试部署后的前端发现界面css、js文件无法展示，报错net::ERR_SSL_PROTOCOL_ERROR。

最直接的处理方式如下：
删除index.html文件中的 ------content=“upgrade-insecure-requests”

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

1.因为服务器用的域名有：https、http两种
部署到线上地址，https开头用第一行代码，http用第二行代码
（本地启用项目一般都是http开头，用第二行代码即可，但线上是https开头，部署时需要更换为下面第一行代码）

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

2.跨域详解（包含同源策略)
1.上面遇到的问题呢就是同源策略问题。
所谓同源是指，域名，协议，端口相同。“同源策略“：简单的说就是基于安全考虑，当前域不能访问其他域的东西。

“同源策略“就属于跨域的一种，解决跨域方法呢，除了后台走negix代理外，前端也可以使用JSONP的方式请求接口,jsonp只支持get请求 。但是不推荐使用JSONP ，因为不安全。
（JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，造成服务器崩溃、数据泄露等问题，没有办法追究。因此在使用不是你自己运维的 Web 服务时，一定得保证它安全可靠。）

下面这张图一眼就可以看出来同源策略问题
图片转自：http://blog.csdn.net/u014607184/article/details/52027879

3.浏览器跨域类别：

由于浏览器将CORS请求分为两类：简单请求（simple request）和非简单请求（not-simple-request）。非简单请求会在正式通信之前，增加一次HTTP请求，称之为"预检"请求(preflight)。浏览器会先发起OPTIONS方法到服务器，以获知服务器是否允许该实际请求。
如果第一次请求就 报错 或者 报跨域，那么你可以让后台看看是不是她那边抛出异常了。
(非简单请求是那种对服务器提出特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

4.JSONP方法
（1）下载jsonp

npm install vue-jsonp --save
npm uninstall vue-jsonp  //卸载命令

（2）vue/uniapp项目 main.js 中引入、使用

import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)

（3-1）页面使用
这里是为了获取省市区名称、编码，请求腾讯地图：逆地址解析接口

腾讯地图api地图地址如下
https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder

 this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/' , {
    location: '39.984154,116.307490',
	key:"xxxxxx",
	get_poi:1,
	output: 'jsonp',//因为外部链接，腾讯要处理跨域，必须有
 }).then((res)=>{
 　	 console.log(res,'返回数据----------------')
 })

解决了跨域，结果被浏览器CORE阻止了,请求地址加上这个参数output: ‘jsonp’, 就可以了。
（3-2）下载完jsonp页面内使用-转载于：

 https://www.jianshu.com/p/720e453ca27d

http和https区别
http含义：超文本传输协议，常基于TCP/IP协议传输数据，www必须遵守的标准，设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。请求方式：PATCH、HEAD、 OPTIONS、put、delete、get、post、

1、http不安全，https的对数据进行了加密，再发送到服务器，不会被第三方截获；内容进行了加密，保护了数据的完整性（防止被篡改）；身份验证
2、HTTPS网站将会作为搜索排名的一个重要权重指标。也就是说HTTPS网站比起HTTP网站在搜索排名中更有优势。

什么情况下使用http， 什么情况下使用https？？？？？？？？？
一般的话用http，需要加密的用户信息、涉及资金的用htttps；
更多如下： HTTPS连接缓存不如HTTP高效，流量成本高。 HTTPS连接服务器端资源占用高很多，支持访客多的网站需要投入更大的成本。 HTTPS协议握手阶段比较费时，对网站的响应速度有影响，影响用户体验。比较好的方式是采用分而治之，类似12306网站的主页使用HTTP协议，有关于用户信息等方面使用HTTPS。

原文链接：https://blog.csdn.net/weixin_46172085/article/details/121472151