网站折腾记

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

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

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

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

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

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

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

WechatIMG27.jpg

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

WechatIMG22.jpg

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

WechatIMG2.jpg

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

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

WechatIMG4.jpg

WechatIMG21.jpg

因为我的浏览器的 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;
}

WechatIMG65.jpg

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

WechatIMG67.jpg

只要将 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或者后端代码有问题。下回排查问题得注意这个了。