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

这篇具有很好参考价值的文章主要介绍了前端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
前端js css文件报错net::ERR_SSL_PROTOCOL_ERROR
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文章来源地址https://www.toymoban.com/news/detail-425702.html

到了这里,关于前端js css文件报错net::ERR_SSL_PROTOCOL_ERROR的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js中出现报错:net::ERR_FILE_NOT_FOUND的解决

    net::ERR_FILE_NOT_FOUND的意思是:网:错误_文件_没有找到,也就是说绑定数据源文件有问题。这时要检查是否是拼写错误、路径错误,或者是逻辑问题。 我的控制台报错如下: 我的页面显示如下:   从这里可以看出,大致思路没问题,只是数据问题。 首先怀疑是否没有获取到

    2024年02月11日
    浏览(56)
  • 接口请求报错 net::ERR_EMPTY_RESPONSE

    使用fetch请求接口,控制台报错net::ERR_EMPTY_RESPONSE。 但是使用Swagger请求接口正常, 使用Postman请求接口也正常。 是不是因为浏览器多重跨域导致。因为当前项目后端地址涉及多重转发。 是不是因为Access-Control-Allow-Header, 没有允许对应的请求头参数。 是不是因为Access-Control-Al

    2023年04月08日
    浏览(66)
  • post请求报错 net::ERR_CONNECTION_REFUSED AxiosError code: “ERR_NETWORK“

    post请求接口报错net::ERR_CONNECTION_REFUSED,AxiosError中 code: \\\"ERR_NETWORK\\\"。百度了有说跨域有说请求格式不对,我的跨域已经在nodejs中设置了cors,还是不知道什么原因 查看network发现请求了两次接口,百度说 strict-origin-when-cross-origin 跨域报错,按照说的操作还是不行  最后看是请求头

    2024年02月11日
    浏览(41)
  • 【前端】关于如何将html、js、css等一个html网页打包成单一的exe可执行程序文件

    要将 HTML、JS、CSS 等一个 HTML 网页打包成单一的可执行程序文件(exe),通常需要使用一些工具和框架来实现的。 这里以Electron为例,详细说一下具体的打包过程 1.安装依赖: 确保已经安装了 Node.js。在命令行中进入你的项目目录,执行以下命令安装 Electron: 2.创建文件结构

    2024年02月11日
    浏览(57)
  • net::ERR_CONTENT_LENGTH_MISMATCH 206 (Partial Content) 报错

    最近现场实施人员反馈有个功能不能正常使用,F12查看浏览器的控制台,提示net::ERR_CONTENT_LENGTH_MISMATCH 206 (Partial Content)的错误, HTTP状态码206表示“部分内容”(Partial Content),表示服务器成功处理了部分客户端的请求。通常情况下,这个状态码是在客户端通过HTTP Range头部请

    2023年04月25日
    浏览(39)
  • net::ERR_HTTP2_PROTOCOL_ERROR 报错处理

    关于浏览器报这个错的文章无数,所以这个报错需要根据自己的实际情况进行排查处理。 上截图: 我的问题是在导出文件的时候报错的,系统其他导出功能没问题,只有这一个导出存在该问题。下面是我的排查情况: 页面报错第一时间到服务器排查日志,后端服务日志无报

    2024年02月12日
    浏览(80)
  • Vue2 跨域问题报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK

    请求场景: 当前页面URL:http://127.0.0.1:8000/testcase 跳转请求页面URL:http://127.0.0.1:5000/testcase_orm 使用axios请求 时 页面提示跨域报错 跨域报错信息 Access to XMLHttpRequest at ‘http://127.0.0.1:5000/testcase_orm’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-O

    2024年01月23日
    浏览(70)
  • 【vue打包】线上部署报错net::ERR_ABORTED 404 (Not Found)

    一、问题: 线上部署报错net::ERR_ABORTED 404 (Not Found) ,但本地部署到nginx里面却没问题 二、分析: publicPath 配置的原因 三、解决: 如果以前使用publicPath: \\\"/\\\"没错,看一下nginx配置有没有错(记得nginx要重启) 四、扩展: 【vue-cli设置publicPath小记】https://www.zhuxianfei.com/jishu/js/26916.h

    2024年02月03日
    浏览(40)
  • 前端报错npm ERR! cb() never called!问题

    删除  node_modules  目录,删除  package-lock.json  文件,清除缓存,再重新npm install,不过一般出现这个问题并不会生成  package-lock.json  文件 使用npm uninstall -g npm更新npm版本来解决这个问题,不过我们一般会安装node和npm的匹配版本。 如果node和npm版本不匹配就会报这个问题 2.

    2024年04月27日
    浏览(44)
  • 微信小程序报错request:fail -2:net::ERR_FAILED(生成中间证书)

    小程序本地测试调用https接口正常,真机调试发现报错 request:fail-2:net:ERR_FAILED 很有可能是ssl证书问题。 进入网站:https://www.myssl.cn/tools/check-server-cert.html 输入网站后读取证书结果如下 缺少中间证书 中间证书是CA(证书颁发机构)签发数字证书时使用的一种证书。它是在根CA证

    2024年02月04日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包