温馨提示:
最后更新时间2020-12-02 19:45:36,若内容或图片失效,请留言反馈!
之前用Python重写过这个博客,访问地址:https://html.linyufan.com/,当时也没到遇到什么太大的困难,大概是今年过年的时候开发的。
用Python写博客的过程,一切都还比较顺利,毕竟有前人探路,顺着走就行,部署的时候遇到点小问题,就是Python的生产环境配置。
大概有两种方案,一种是以uWSGI +Nginx的方式部署,但大部也是在Linux环境下。在Win+Apache就不好弄了。
另一种就是用第三方的像Tornado这样的服务下运行,据说运行起来会闪闪发光,不知道是不是真的,反正我是没部署过。
最Low的就是我用的方案,Win+apache+mod_wsgi+WSGIPythonHome配置部署多个虚拟环境解决方案
但不管怎么说,总算是弄上线了。
不过这次部署Vue就费了些事,搞得差点放弃了。
部署Vue线上生产环境着实费了些脑细胞,第一个大坑就是,API接口地址暴露的问题,担心老是接受一些莫名其妙的试探性访问,浪费服务器性能,于是想到了加密。
将Vue最后Build到的app.js文件加密不就完事了。
想就到这里就是一个字:淦。
事实情况是我大意了,完全无视前辈们“前端无加密”的忠告,执意加密Vue生成的项目js文件,导致Vue博客差点难产。
以前在公司做过一些加密项目,但也是限于核心代码,以及防止采集的(有干扰),用angular.js做渲染,就没问题。
对于这个Vue重写的博客,我不想暴露Api接口地址,以及请求Appid信息,查了很多关于js文件的加密资料,搞出来了好几个类型的加密,运行是没问题,只是忽略了一件事“前端无加密”,只要浏览器发起请求接口,就会有Api地址,也就能看到了,突然就想起来,这事不靠谱!
So,如果仅仅是想对Api接口这些加密,还是不要想了,有这功夫,在后端搞点小动作,中断一些非法请求,自然就香了。
最吓人的是,做了几个js文件的加密,Win10给我干掉了,这可真是……
然后跑去看了一些别人做得比较大的Vue项目,查看App.js,基本都是加密,或者是部分关键信息加密,但根本没有任何用,在火狐下一个F12暴露一切,找到他们的Api接口地址后,我直接访问,Soeasy的就返回了Jsion数据,我也就释然了。
那既然加密app.js暴露Api地址的办法不可行,那就加一个判断机制,如果不是指定的请求后端处理下。
接下来第二个坑:明明发送的是POST请求,为什么到服务器就变成OPTIONS请求了。
最开始根本没意识到这个问题。
Vue博客项目上线后,解决了跨域【Access-Control-Allow-Origin:】配置问题,就能直接拿Api上的数据了,本地测试也没问题。
但上线之后,还是出现了访问出错的情况。
这是谷歌浏览器下的返回错误信息,看着像CORS跨域问题,但我试了一万遍,跨域配置根本没问题,连【Access-Control-Allow-Origin:*】都用上了,还是不行,在Postman里加上了Headers及signature,也能成功返回信息。
Postman请求的信息UA中有postman的信息,在日志中比较好发现,一切正常。
就是在谷歌浏览器中就不正常了,一开始根本就没注意到这【It does not have http ok status】,还是在跨域问题上纠结,前端代码,后端代码,服务器配置,删了改,改了删,问题还是依旧,百思不得其解……
直到注意到【It does not have http ok status】,才发现http返回的状态是200呀,说明是服务器拦截了。果断开了火狐浏览器查看情况。
火狐因为装得插件多,平时不怎么用,在开发关键时刻会打开看看一些数据包的情况。
一个F12,一个F5就发现问题了。如下图:
两个信息:
1、浏览器发送的请求是:OPTIONS,而不是我用的POST。
2、访问失败的原因是:CORS预检响应未成功。
赶紧又去补”CORS“跨域的坑,之前配置跨域的时候看过,真是知其然,不知基所以然,配置成功了就不管别的了。
果然还是不认真惹的祸,明明看过相关文档,就是没注意到预请求的说明。
然后到日志看请求信息,发现在OPTIONS发过来预请求的时候,Headers是不带我定义的【x-access-appid】的,没有appid,签名也就失败了,直接就拦下了。
怪不得服务器返回的是200,但请求信息就是没过来。正常的POST请求,[PARAM]中的数组是有信息的,如下图:
接着就知道问题原因了,是我前面提到的加密js不可行后,加了一个请求判断,在请求头Headers中带上我定义的【x-access-appid】,计算签名是否合规,再返回请求信息。
浏览器在请求的时候,触发OPTIONS请求(我也不是很懂),没有携带【x-access-appid】请求,自然也就没有appid了,没有appid签名也就不成功,所以……知道失败的原因了,解决办法也就有了。
这次上线Vue项目,还是比较坎坷的,环境部署加上测试端口和跨域,及加密问题,搞了整整三天,两个头一样大,差点放弃了。
部署环境的事,就不细说了,和阿里云沟通,单独开了一个DCDN的端口(默认是80和443,没有别的),进行Nginx的转发,也算是解决得差不多了。
参考资料:
0、【阮一峰的网络日志】跨域资源共享 CORS 详解
1、【csdn】因跨域,post请求变options请求(vue)
2、【csdn】Vue发送ajax post请求,变为options请求,并返回错误代码403的解决方案
3、【csdn】Vue中使用axios POST请求变成OPTIONS的解决办法
4、【mozilla技术社区】跨源资源共享(CORS)
5、【掘金】ajax跨域,这应该是最全的解决方案了