img 标签访问图片返回 403 forbidden 的解决方法 前言通过浏览器直接访问图片资源可以正常访问，但是通过 img 标签的形式，在页面中显示图片加载失败，控制台报错信息提示：403 forbidden。解决方法在页面头部的 head 中添加以下代码即可：<meta name="referrer" content="no-referrer" />原理简述http 请求体的 header 中有一个 referrer 字段，用来表示发起 http 请求的源地址信息，这个 referrer 信息是可以省略但是不可修改的，就是说你只能设置是否带上这个 referrer 信息，不能定制 referrer 里面的值。服务器端在拿到这个 referrer 值后就可以进行相关的处理，比如图片资源，可以通过 referrer 值判断请求是否来自本站，若不是则返回 403 或者重定向返回其他信息，从而实现图片的防盗链。上面出现 403 就是因为，请求的是别人服务器上的资源，但把自己的 referrer 信息带过去了，被对方服务器拦截返回了 403。在前端可以通过 meta 来设置 referrer policy (来源策略)，具体可以设置哪些值以及对应的结果参考这里。所以针对上面的 403 情况的解决方法，就是把 referrer 设置成 no-referrer，这样发送请求不会带上 referrer 信息，对方服务器也就无法拦截了。隐藏 referrer 信息后，图片资源可以正常访问浏览器中 referrer 默认的值是 no-referrer-when-downgrade，就是除了降级请求的情况以外都会带上 referrer 信息。降级请求是指 https 协议的地址去请求 http 协议，所以上面 403 的情况还有另一种解决方法就是，请求的图片地址换成 http 协议，自己的地址使用 http 协议，这样降级请求也不会带上 referrer。部分 meta 标签的说明<meta charset="utf-8"> <!-- 设置文档字符编码 --> <meta http-equiv="x-ua-compatible" content="ie=edge"><!-- 告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- 指定页面初始缩放比例。--> <!-- 上述3个meta标签须放在head标签最前面;其它head内容放在其后面，如link标签--> <!-- 允许控制加载资源 --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> <!-- 尽可能早的放在文档 --> <!-- 只适用于下面这个标签的内容 --> <!-- 使用web应用程序的名称(当网站作为一个应用程序的时候)--> <meta name="application-name" content="Application Name"> <!-- 页面的简短描述(限150个字符)--> <!-- 在某些情况下这个描述作为搜索结果中所示的代码片段的一部分。--> <meta name="description" content="A description of the page"> <!-- 控制搜索引擎爬行和索引的行为 --> <meta name="robots" content="index,follow,noodp"><!-- 所有搜索引擎 --> <meta name="googlebot" content="index,follow"><!-- 谷歌 --> <!-- 告诉谷歌搜索框不显示链接 --> <meta name="google" content="nositelinkssearchbox"> <!-- 告诉谷歌不要翻译这个页面 --> <meta name="google" content="notranslate"> <!-- Google网站管理员工具的特定元标记，核实对谷歌搜索控制台所有权 --> <meta name="google-site-verification" content="verification_token"> <!-- 说明用什么软件构建生成的网站，(例如,WordPress,Dreamweaver) --> <meta name="generator" content="program"> <!-- 简短描述你的网站的主题 --> <meta name="subject" content="your website's subject"> <!-- 很短(10个词以内)描述。主要学术论文 --> <meta name="abstract" content=""> <!-- 完整的域名或网址 --> <meta name="url" content="https://example.com/"> <meta name="directory" content="submission"> <!-- 对当前页面一个等级衡量，告诉蜘蛛当前页面在整个网站中的权重到底是多少。General是一般页面，Mature是比较成熟的页面，Restricted代表受限制的。 --> <meta name="rating" content="General"> <!-- 隐藏发送请求时请求头表示来源的referrer字段。 --> <meta name="referrer" content="no-referrer"> <!-- 禁用自动检测和格式的电话号码 --> <meta name="format-detection" content="telephone=no"> <!-- 通过设置“off”,完全退出DNS队列 --> <meta http-equiv="x-dns-prefetch-control" content="off"> <!-- 在客户端存储 cookie，web 浏览器的客户端识别--> <meta http-equiv="set-cookie" content="name=value; expires=date; path=url"> <!-- 指定要显示在一个特定框架中的页面 --> <meta http-equiv="Window-Target" content="_value"> <!-- 地理标签 --> <meta name="ICBM" content="latitude, longitude"> <meta name="geo.position" content="latitude;longitude"> <meta name="geo.region" content="country[-state]"><!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" --> <meta name="geo.placename" content="city/town"><!-- 如 content="New York City" -->

使用Semantic UI不显示部分图标解决办法 问题场景：使用Semantic UI写前端页面的时候，原来是使用CDN引入js跟css的，但是总感觉每次修改完以后，到浏览器查看，渲染速度好慢，可能是因为网络问题。然后就下载到本地，加载本地资源。就出现了图标无法显示，都是显示为一个方框原因：估计跟icon版本有关，本地引入的话需要两个css解决办法使用cdn加载icon的css，或者是将icon的css<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>

此内容被密码保护 加密文章，请前往内页查看详情

网盘挂载程序sharelist美化教程 这是 全网第一篇 关于Sharelist实战美化教程，网上所能看到的所有此教程均抄袭自本博客！ 全网首发，认准 William's Blog!修改完之后：2021年2月1日更新有热心网友留言提示，最近sharelist更新，部分文件路径有变。比如说教程里的/app/views/default/index.pug现在的位置是/theme/default/view/index.pug，/app/public/style/icon.less现在是/theme/default/style/icon.less。大家修改时请根据新版路径进行修改~修改方法隐藏内容，请前往内页查看详情

Springboot-Thymleaf语法 1、表达式${...} 获取变量值， *{...} 在功能上与${}是一样的。#{} 获取国际化内容@{...} 定义url，例子： @{/order/process(execId=${execId},execType='FAST')}th:each 遍历每次遍历都会生成当前这个标签th:each="遍历代替对象 ：${要遍历的东西}"比如有一个map， map.put("users", Arrays.asList("william","danlel","kosin"));那么遍历时：第二个th是遍历map，第一个th是将遍历出来的user写到h4标题当中，原本h4是空的遍历的行内写法，也就是说上面的代码不要第一个th，那么写法是：[[${user}]]其中[[...]]相当于th:text 而 [(...)] 相当于 th:untext, 前者会解析特殊字符，后者不解析特殊字符

Springboot+LayUI使用百度地图显示多个地点 因工作业务需要，使用百度地图API，通过输入多个地点的经纬度，显示在百度地图上，并结合springboot+layui进行展示页面模板用的是freemarker。JS代码：<script type="text/javascript"> var markerArr = [ {title: "名称：宜阳恒丰园烩面馆", point: "112.182404, 34.52419", address: "宜阳县文明路恒丰园食府", tel: "未知"}, {title: "名称：宜阳钓鱼岛酒店", point: "112.194981,34.521459", address: "洛阳宜阳县城关镇红旗中路 ", tel: "未知"}, {title: "名称：宜阳锦龙喜宴酒店", point: "112.1996,34.5269", address: "宜阳县城关镇锦龙大道锦龙广场内", tel: "未知"}, {title: "名称：百姓厨房", point: "112.196712,34.521718", address: "洛阳宜阳县城关镇红旗中路与丰源路交叉口", tel: "未知"} ]; var map; //Map实例 function map_init() { map = new BMap.Map("map"); //第1步：设置地图中心点，宜阳钓鱼岛酒店 var point = new BMap.Point(112.194981, 34.521459); //第2步：初始化地图,设置中心点坐标和地图级别。 map.centerAndZoom(point, 11); //第3步：启用滚轮放大缩小 map.enableScrollWheelZoom(true); //第4步：向地图中添加缩放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //第5步：向地图中添加缩略图控件 var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrlOve); //第6步：向地图中添加比例尺控件 var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrlSca); //第7步：绘制点 for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].point.split(",")[0]; var p1 = markerArr[i].point.split(",")[1]; var maker = addMarker(new window.BMap.Point(p0, p1), i); addInfoWindow(maker, markerArr[i], i); } } // 添加标注 function addMarker(point, index) { var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - index * 25) }); var marker = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker); return marker; } // 添加信息窗口 function addInfoWindow(marker, poi) { //pop弹窗标题 var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '<\/div>'; //pop弹窗信息 var html = []; html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>'); html.push('<tr>'); html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:<\/td>'); html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' <\/td>'); html.push('<\/tr>'); html.push('<\/tbody><\/table>'); var infoWindow = new BMap.InfoWindow(html.join(""), {title: title, width: 200}); var openInfoWinFun = function () { marker.openInfoWindow(infoWindow); }; marker.addEventListener("mouseover", openInfoWinFun); return openInfoWinFun; } //异步调用百度js function map_load() { var load = document.createElement("script"); load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init"; document.body.appendChild(load); } window.onload = map_load; </script>完成以上代码后，打开页面即可看到百度地图，已经刚刚添加4个地点，鼠标移入的时候能够展示出信息。但是这时候有一个不是很好看的地方，那就是地图左下角有一个百度地图的logo和一行文字。如何去掉呢？通过css样式隐藏掉，在 标签内添加css样式：<#-- 删除百度地图左下角的logo以及文字 --> <style type="text/css"> .BMap_cpyCtrl, .anchorBL { display: none; } </style>

Springboot使用LayUI将Ajax发送请求获取的返回数据用ECharts图表显示 后端使用Springboot，前端框架使用LayUI，前端页面一个日期控件，一个下拉框控件，实现选择日期，以及选择下拉框，点击提交，layui发送ajax请求到后端，请求数据返回后，在控件下方用echarts图表显示出来。HTML代码：<form class="layui-form" action="/"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">选择日期</label> <div class="layui-input-inline"> <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input date_selected"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">选择企业</label> <div class="layui-input-inline"> <select name="company_name" lay-filter="company_name" class="com_selected"> <option value=""></option> <option value="0">选项一</option> <option value="1">选项二</option> <option value="2">选项三</option> <option value="3">选项四</option> </select> </div> </div> <div class="layui-inline view_history" style="margin-left: 70px;"> <div class="layui-input-inline"> <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即查看</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </div> </form>Javascript代码：<script> layui.use(['form', 'layedit', 'laydate', 'element', 'echarts', 'jquery'], function () { var form = layui.form , $ = layui.jquery , layer = layui.layer , layedit = layui.layedit , laydate = layui.laydate , element = layui.element , echarts = layui.echarts; //日期 laydate.render({ elem: '#date' }); //监听提交 var ndData = null; form.on('submit(demo1)', function (data) { var date_user = $(".date_selected").val(); var name_user = $(".com_selected").find("option:selected").text(); $.ajax({ url: "/history/getlist", type: "GET", data: { date: date_user, name: name_user }, dataType: "JSON", async: false, success: function (res) { /** * Echarts显示 */ var echartsRecords = echarts.init(document.getElementById('EchartZhu'), 'walden'); var optionRecords = { tooltip: { trigger: 'axis' }, legend: { data: ['油烟浓度', '颗粒物', '非甲烷总烃'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一'，'周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value', }, dataZoom: [ { type: 'inside', show: true, top: '90%', realtime: true, start: 85, end: 100 } ], series: [{ name: '油烟浓度', type: 'line', data: res } ] }; echartsRecords.setOption(optionRecords); // echarts 窗口缩放自适应 window.onresize = function () { echartsRecords.resize(); } } }); return false; }); }); </script> 这里有一个要注意的地方就是form.on监听提交的方法里面一定要有 return false来禁用表单跳转，不然的话，点击提交以后，iframe就会跳转，我这里是变成了首页，也就是iframe里面变成了另一个刚打开的系统首页对于Echarts的引入，个人不建议使用LayUI集成的，因为我用了集成的ECharts总有各种小毛病出现，什么 EchartsTheme.js找不到等等，我当时已经将EchartsTheme.js复制到每一个可能的文件夹下都还是这样抱错。最后我是直接在要显示ECharts的页面引入，而不是在一开始的整个LayUI框架首页引入。请求API返回的是登录页刚开始，我写好接口以后，尝试着自己创造链接，没有从前端页面获取用户选择的情况下测试下接口行不行。我发现浏览器上登录系统后，再从输入链接的话是能够返回数据的。但是，我要是清楚数据，或者说没有登录的情况下去访问，系统回跳转到登录页（PS：用Postman测试的时候也是返回的登录页的HTML代码）。在我这里是因为，在Security的配置中设置了除了登录页以及静态资源外都要登录后访问，于是我修改了security的配置文件，加了一行代码 web.ignoring().mvcMatchers("/history/**");@Override public void configure(WebSecurity web) throws Exception { web.ignoring().mvcMatchers("/lib/**", "/css/**", "/js/**"); web.ignoring().mvcMatchers("/history/**"); }放行该API路径后，使用postman已经layui中用ajax发送http请求都可以获取数据，而不用先登录。（可能不安全，大家看着办）

React的基本使用 1、引入资源使用React需要引入三个js文件，分别是: react.js、react-dom.js、babel.min.js、涉及到PropType的还需要添加 prop-types.js引入的三个文件 script 类型都是 text/javascript2、使用React2.1、创建虚拟DOM使用babel脚本是 script 的类型 type="text/babel"var element = React.createElement('h1',{id:'myTitle'},'hello') // 纯js创建，一般不用 var element = {title}2.2、渲染虚拟DOMReactDOM.render(param1, param2)2.3、JSX创建react虚拟DOM（元素）对象var ele = Hello JSX!1、要注意的是它既不是字符串，也不是HTML/XML标签2、它最终产生的就是一个JS对象3、使用总结babel的作用，浏览器不能直接解析jsx代码，需要babel转译为纯js代码才能运行只要用了 jsx，都要加上 type="text/babel" ， 声明需要babel来处理3.1、如何将一个数据的数组转换为一个标签的数组？使用数组的Map（）const names = ['jquery','zepto','angular','react','vue'] const ul = ({ names.map((name) => {name}) })3.2、组件的使用1、组件名必须首字母大写2、虚拟DOM元素只能有一个根元素3、虚拟DOM元素必须有结束标签3.2.1、render()渲染组件标签的基本流程1）React内部会创建组件实例对象2）得到包含的虚拟DOM并解析为真实DOM3）插入到指定的页面元素内部3.3、状态有关1）初始化状态：constructor(props){ super(props) this.state = { stateProp1:value1, stateProp2:value2 } }2) 读取某个状态的值this.state.statePropertyName，比如上面的 this.state.stateProp13) 更新状态this.setState({ stateProp1:value3, stateProp2:value4 })4) 将新增方法中的this强制绑定为组件对象this.handleClick = this.handleClick.bind(this)3.4、input取值react中有一个属性类似HTML中的ID或者说class，即 ref，比如:<input type="text" ref="content">// 获取input的值const iuput = this.refs.content第二种方式：<input type="text" ref="{input" ==""> this.input=input} /> // 这也是后面react推荐的 代码有误，未修改获取input的值： const text = this.input.value去空格， const text = this.input.value.trim()把获取到的text存到 props中： this.props.add(text)