坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › 网站折腾记

网站折腾记

坚果大叔
2024-02-22 15:34:47技术阅读 5,137

因为现在博客(cuixinxin.cn)一直是用的 WordPress 来搭建的。以前一个自己用 vue二开的博客就不怎么使用了。

后来因为服务器到期迁移,新服务器因为wordpress可以用宝塔来部署,当时也想着lieme也用宝塔面板来部署管理。

结果因为中间时间太长了。自己当初怎么部署 lieme的已经全部忘记了。只记得要配置 ngnix 和跨域什么的。导致在宝塔部署完成后,C 端页面是可以正常访问的。但是 Lieme站的管理后台是报跨域的问题。

因为已经有新博客了,当时把 Lieme站 迁移到了cuixinxin.cn 所以这个问题就一直扔在那没有管。因为也不怎么用啊。

但是毕竟有时候还是会打开 Lieme 看一下。因为有的服务还是用的这个域名来部署。

正好过年前cuixinxin的备案掉了。因为备案碰到过年其实这段时间博客是一直不能访问的。我也只好耐心的等着备案完成。这时候有看到 Lieme 的跨域,强迫症上来了,小样我还整不了你。

因为距离上次部署的时间太久了,好长一段时间也没有折腾部署相关的问题。感觉有种无从下手的感觉。

网站折腾记-坚果大叔

本地访问是没有任何问题的。而且博客也是可以获取到数据,但切换的 admin 就不行了。

网站折腾记-坚果大叔

因为本地是访问好好的,但是部署到服务器就有问题,一开始我也没有注意看一直以为是跨域的问题。就去 php设置 header 和 去 ngnix 中设置 location。但是死活就是不行。

网站折腾记-坚果大叔

我一直以为是 ngnix配置不正确或者是博客的处理方式和 admin 的接口有差异,但是因为时间太久了。根本想不起来了。

其实下面的报错是浏览器发送 options 预请求的时候没有正确处理。导致预请求过不去。所以后面的 admin的相关接口就报错。

网站折腾记-坚果大叔

网站折腾记-坚果大叔

因为我的浏览器的 Network 开了 FETCH/XHR 的过滤。所以根本没有看到 OPTIONS 的预请求。一直纠结在跨域上面。然后本来让以前的同事帮看是不是 php哪里问题的。然后给了我上面的截图。我放开之后才知道了原因所在。

然后就去后端代码中将 OPTIONS 单独处理了一下。


header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods:  *');
header('Access-Control-Allow-Headers: *');

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS'){
    //允许的源域名
    header("Access-Control-Allow-Origin: *");
    //允许的请求头信息
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
    //允许的请求类型
    header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
    exit;
}

网站折腾记-坚果大叔

发现 OPTIONS 正常处理后又出现了下面问题。

网站折腾记-坚果大叔

只要将 header 改成下面的就好了。

//处理跨域预检请求
if($_SERVER['REQUEST_METHOD'] == 'OPTIONS'){
    //允许的源域名
    header("Access-Control-Allow-Origin: *");
    //允许的请求头信息
    header("Access-Control-Allow-Headers: *");
    //允许的请求类型
    header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
    exit;
}

总结

由于 Network 一直未全部打开,导致没有看到预请求的 OPTIONS 没有成功,我就一直以为是 Ngnix或者后端代码有问题。下回排查问题得注意这个了。

赞赏 赞(4)
做梦
上一篇
过年
下一篇
在小程序中查看

评论已关闭

搜你想看的
聚合文章
10000字!32个手写JS,让你Level∞ +!
Clean-Code-Js
CSS之BFC
周末,去太湖。
闲言碎语
Memos
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
559 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
4,996 6 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
2,329 5 2
网页点击平滑滚动效果~
2024-10-17 16:43:08
2,033 4
4
  • 4
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
317
文章
125
评论
365
喜欢