草庐IT

前端包部署到线上net::ERR_SSL_PROTOCOL_ERROR（跨域/同源策略）

Change!! 2023-04-11 原文

部署到线上报错一堆文件：
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.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。

ERR_SSL_PROTOCOL_ERRORPROTOCOLquotspangt

有关前端包部署到线上net::ERR_SSL_PROTOCOL_ERROR（跨域/同源策略）的更多相关文章

  1. ruby-on-rails - Ruby net/ldap 模块中的内存泄漏 - 2

    作为我的Rails应用程序的一部分，我编写了一个小导入程序，它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是，与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存，我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关，因为当我删除对LDAP内容的调用时，内存使用情况会很好地稳定下来。此外，不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray，它们都是LDAP库的一部分。当我运行导入时，内存使用量最终达到超过1GB的峰值。如果问题存在，我需要找到一些方法来更正我的代

  2. ruby-on-rails - Ruby on Rails : . 常量化 : wrong constant name error? - 2

    我正在使用这个:4.times{|i|assert_not_equal("content#{i+2}".constantize,object.first_content)}我之前声明过局部变量content1content2content3content4content5我得到的错误NameError:wrongconstantnamecontent2这个错误是什么意思？我很确定我想要content2=\ 最佳答案 你必须用一个大字母来调用ruby​​常量:Content2而不是content2。Aconstantnamestart

  3. ruby - 如何模拟 Net::HTTP::Post？ - 2

    是的，我知道最好使用webmock，但我想知道如何在RSpec中模拟此方法:defmethod_to_testurl=URI.parseurireq=Net::HTTP::Post.newurl.pathres=Net::HTTP.start(url.host,url.port)do|http|http.requestreq,foo:1endresend这是RSpec:let(:uri){'http://example.com'}specify'HTTPcall'dohttp=mock:httpNet::HTTP.stub!(:start).and_yieldhttphttp.shou

  4. ruby-on-rails - 错误 : Error installing pg: ERROR: Failed to build gem native extension - 2

    我克隆了一个rails仓库，我现在正尝试捆绑安装背景:OSXElCapitanruby2.2.3p173(2015-08-18修订版51636)[x86_64-darwin15]rails-v在您的Gemfile中列出的或native可用的任何gem源中找不到gem'pg(>=0)ruby​​'。运行bundleinstall以安装缺少的gem。bundleinstallFetchinggemmetadatafromhttps://rubygems.org/............Fetchingversionmetadatafromhttps://rubygems.org/...Fe

  5. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  6. ruby - Net::HTTP 获取源代码和状态 - 2

    我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。 最佳答案 在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur

  7. ruby - RVM "ERROR: Unable to checkout branch ."单用户 - 2

    我在新的Debian6VirtualBoxVM上安装RVM时遇到问题。我已经安装了所有需要的包并使用下载了安装脚本(curl-shttps://rvm.beginrescueend.com/install/rvm)>rvm，但以单个用户身份运行时bashrvm我收到以下错误消息:ERROR:Unabletocheckoutbranch.安装在这里停止，并且(据我所知)没有安装RVM的任何文件。如果我以root身份运行脚本(对于多用户安装)，我会收到另一条消息:Successfullycheckedoutbranch''安装程序继续并指示成功，但未添加.rvm目录，甚至在修改我的.bas

  8. ruby-on-rails - Ruby on Rails 可以部署在 Azure 网站上吗？ - 2

    我可以在Azure网站上部署RubyonRails吗？ 最佳答案 还没有。目前仅支持.NET和PHP。 关于ruby-on-rails-RubyonRails可以部署在Azure网站上吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/12964010/

  9. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

  10. jenkins部署1--jenkins+gitee持续集成 - 2

    前置步骤我们都操作完了，这篇开始介绍jenkins的集成。话不多说，看操作1、登录进入jenkins后会让你选择安装插件，选择第一个默认的就行。安装完成后设置账号密码，重新登录。2、配置JDK和Git都需要执行路径，所以需要先把执行路径找到，先进入服务器的docker容器，2.1JDK的路径root@69eef9ee86cf:/usr/bin#echo$JAVA_HOME/usr/local/openjdk-82.2Git的路径root@69eef9ee86cf:/#whichgit/usr/bin/git3、先配置JDK和Git。点击：ManageJenkins>>GlobalToolCon

随机推荐