闲暇时光 🌑
闲暇时光
我の闲暇时光 time flies
静谧时光,执笔抒心,岁月痕迹甚好。
109
21
58



vue路由history模式刷新404问题解决方案

2022-06-07 14:37:24 - 2025-07-14 00:06:04
無慕 - 1.62K - 6.92分钟 - 2.34K

vue单页因微信分享和自动登陆须要,对于URL中存在’#’的地址,处理起来比较坑。

用history模式就不会存在这样的问题。可是换成history模式,就会有个新的问题,就是页面刷新后,页面就没法显示了(404)。

对于这个问题,只需要配置网站Nginx就可以了

server {
        listen       8888;#默认端口是80,若是端口没被占用能够不用修改
        server_name  localhost;
        root        E:/vue/my_project/dist;#vue项目的打包后的dist
        
        
        ##############修改配置文件,以上部分应该默认存在,下面两个location是重点#############
        location / {
            try_files $uri $uri/ @router;#须要指向下面的@router不然会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router,主要缘由是路由的路径资源并非一个真实的路径,因此没法找到具体的文件
        #所以须要rewrite到index.html中,而后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......该文件其余部分于此功能无关,省略
  }

编程 - 前端
浏览器 vue 问题 笔记 前端

页面滑动到底触发事件

2021-04-27 09:26:44 - 2025-07-14 00:06:04
無慕 - 684 - 13秒 - 1.76K

此方法是根据下滑高度加一个值大于当前页面高度来判断的,所以使用时需要自行监测滑动高度和当前页的高度,修改800这个数值具体大小。

$(function() {
    $(document).scroll(function() {
        var scrollHeight = $(document).height();
        console.log('当前高度:'+$(document).scrollTop(),'页面高度'+scrollHeight)
        if ($(document).scrollTop()+800 >= scrollHeight) {
            console.log('到底了~')
        }
    })
})

编程 - 前端
jQuery 前端

debugger说明

2021-04-27 09:25:33 - 2025-07-14 00:06:04
無慕 - 97 - 39秒 - 1.90K

在js代码中写入debugger,回到浏览器F12打开检查窗口,触发js后从debugger开始调试,按F10执行一行代码,并在代码后面显示数值。

使用 debugger 语句类似于在代码中设置断点。

编程 - 前端
笔记 前端 JavaScript jQuery

前后端分离之跨域问题

2021-02-19 16:33:55 - 2025-07-14 00:06:03
無慕 - 1.20K - 41秒 - 1.86K

什么是跨域?

浏览器的同源策略(Same origin policy),它是一种约定,也是浏览器最核心最基本的安全功能。所谓同源指的是:协议(是指http和https)、域名(domain)、端口(port)相同。

解决办法

在php后端api入口文件中加入下面的代码即可解决问题:

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE");
header("Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding");

相关说明

CORS

CORS是一个W3C标准,全称是“跨域资源共享”(Cross-origin resource sharing),它允许浏览器向跨源服务器发出XMLHttpRequest请求,从而克服了只能同源调用的限制。

Access-Control-Allow-Origin

Access-Control-Allow-Origin指的是允许发起跨域的域名。

在浏览器跨域请求中,请求头(request headers)会出现Origin字段(有个奇怪现象,谷歌游览器在非跨域情况下,也会发送origin字段),这个字段会与Access-Control-Allow-Origin字段的内容进项匹配,如果发现符合Access-Control-Allow-Origin字段的要求才会放行通过,否则会出现CORS错误。

但实际上Access-Control-Allow-Origin有很多的设置方式,“*”是最粗暴简单的,但也是最不安全的,它代表着所有请求都允许通过。如果为了服务器安全考虑不建议这么设置,最好还是使用具体的域名地址。而且如果是“*”的话,浏览器将不会发送cookies,即使你的xhr设置了withCredentials,只有在指定域名下才允许发送。

Access-Control-Allow-Methods

Access-Control-Allow-Methods指的是请求的方式。

Access-Control-Allow-Headers

Access-Control-Allow-Headers指的是请求的自定义请求头字段。

跨域时浏览器会向服务器发送预检请求,询问是否支持跨域的自定义header字段,这时候就需要设置的Access-Control-Allow-Headers字段进行应答。

编程 - 后端
PHP 问题 后端 前端
1
鲁ICP备2023049263号-1
© 2020 – 至今 闲暇时光
由 PHP MySQL 开发而成 | 主题 - Yun
upyun