部署到线上报错一堆文件：
js、css、html报如下错误
net::ERR_SSL_PROTOCOL_ERROR
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。
详细的CROS请求，本人自己百度的：https://javascript.ruanyifeng.com/bom/cors.html#toc5)
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,'返回数据----------------')
})
好不容易干到半夜12点解决了跨域，结果被浏览器CORE阻止了，真******的。还好问了同事，请求地址加上这个参数output: ‘jsonp’, 就可以了
（3-2）下载完jsonp页面内使用-转载于：文章来源：https://www.toymoban.com/news/detail-408697.html
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://www.toymoban.com/news/detail-408697.html
到了这里，关于前端包部署到线上net::ERR_SSL_PROTOCOL_ERROR（跨域/同源策略）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
