记一次Vue项目开发及部署上线经历(我蠢翻了)

2020-12-02 19:45:36 阅读 0评论

温馨提示:

最后更新时间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项目开发及部署上线经历(蠢了)

 

将Vue最后Build到的app.js文件加密不就完事了。

想就到这里就是一个字:淦。

事实情况是我大意了,完全无视前辈们“前端无加密”的忠告,执意加密Vue生成的项目js文件,导致Vue博客差点难产。
 
以前在公司做过一些加密项目,但也是限于核心代码,以及防止采集的(有干扰),用angular.js做渲染,就没问题。
 
 
记一次Vue项目开发及部署上线经历(蠢了)
 
 
对于这个Vue重写的博客,我不想暴露Api接口地址,以及请求Appid信息,查了很多关于js文件的加密资料,搞出来了好几个类型的加密,运行是没问题,只是忽略了一件事“前端无加密”,只要浏览器发起请求接口,就会有Api地址,也就能看到了,突然就想起来,这事不靠谱!
 
 
记一次Vue项目开发及部署上线经历(蠢了)
 
 
So,如果仅仅是想对Api接口这些加密,还是不要想了,有这功夫,在后端搞点小动作,中断一些非法请求,自然就香了。
 
 
记一次Vue项目开发及部署上线经历(蠢了)
 
最吓人的是,做了几个js文件的加密,Win10给我干掉了,这可真是……
 
然后跑去看了一些别人做得比较大的Vue项目,查看App.js,基本都是加密,或者是部分关键信息加密,但根本没有任何用,在火狐下一个F12暴露一切,找到他们的Api接口地址后,我直接访问,Soeasy的就返回了Jsion数据,我也就释然了。
 
 
记一次Vue项目开发及部署上线经历(蠢了)
 
 
那既然加密app.js暴露Api地址的办法不可行,那就加一个判断机制,如果不是指定的请求后端处理下。
 
接下来第二个坑:明明发送的是POST请求,为什么到服务器就变成OPTIONS请求了。
 
最开始根本没意识到这个问题。
 
Vue博客项目上线后,解决了跨域【Access-Control-Allow-Origin:】配置问题,就能直接拿Api上的数据了,本地测试也没问题。
 
但上线之后,还是出现了访问出错的情况。
 
 
记一次Vue项目开发及部署上线经历(蠢了)
 
 
这是谷歌浏览器下的返回错误信息,看着像CORS跨域问题,但我试了一万遍,跨域配置根本没问题,连【Access-Control-Allow-Origin:*】都用上了,还是不行,在Postman里加上了Headers及signature,也能成功返回信息。
 
 
记一次Vue项目开发及部署上线经历(蠢了),Postman返回正常信息
 
Postman请求的信息UA中有postman的信息,在日志中比较好发现,一切正常。
 
就是在谷歌浏览器中就不正常了,一开始根本就没注意到这【It does not have http ok status】,还是在跨域问题上纠结,前端代码,后端代码,服务器配置,删了改,改了删,问题还是依旧,百思不得其解……
 
直到注意到【It does not have http ok status】,才发现http返回的状态是200呀,说明是服务器拦截了。果断开了火狐浏览器查看情况。
 
火狐因为装得插件多,平时不怎么用,在开发关键时刻会打开看看一些数据包的情况。
 
一个F12,一个F5就发现问题了。如下图:
 
 
记一次Vue项目开发及部署上线经历(蠢了)
 
 
两个信息:
 
1、浏览器发送的请求是:OPTIONS,而不是我用的POST。
 
2、访问失败的原因是:CORS预检响应未成功。
 
赶紧又去补”CORS“跨域的坑,之前配置跨域的时候看过,真是知其然,不知基所以然,配置成功了就不管别的了。
 
看完CORS的相关文档后,写了点自己的理解:《vue项目CORS跨域请求500错误,post请求变options请求
 
果然还是不认真惹的祸,明明看过相关文档,就是没注意到预请求的说明。
 
然后到日志看请求信息,发现在OPTIONS发过来预请求的时候,Headers是不带我定义的【x-access-appid】的,没有appid,签名也就失败了,直接就拦下了。
 
 
记一次Vue项目开发及部署上线经历(蠢了)
 
 
怪不得服务器返回的是200,但请求信息就是没过来。正常的POST请求,[PARAM]中的数组是有信息的,如下图:
 
 
记一次Vue项目开发及部署上线经历(蠢了)
 
 
接着就知道问题原因了,是我前面提到的加密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跨域,这应该是最全的解决方案了

 

文章版权声明:除非注明,否则均为林羽凡原创文章,转载或复制请以超链接形式并注明出处。
林羽凡

林羽凡V

林羽凡博客,是一个记录自己生活、互联网技术的原创独立博客 Linyufan.Com

4259 文章
16545 评论
20844977 浏览

了解一下?

  • 了解一下?

优质服务器推荐

  • 软云_RuanCloud

活跃朋友

最新留言

    欢迎加入:heo-出家人:
    邹江 • 时间 21小时前
    WC,凡哥也整上软云了:heo-出家人:
    邹江 • 时间 22小时前
    我能坚持每天5公里,就不错了!
    八字123 • 时间 1天前
    你是在保密局工作吗,家里嘴这么严,才让你知道。????
    jeffer.z的博客 • 时间 2024年03月27日 11:43:08
    欢迎加入!!!
    老张博客 • 时间 2024年03月27日 08:58:30
    @ 林羽凡还好,还好。问题不大,下雨什么的也没什么感觉
    obaby • 时间 2024年03月26日 20:27:24
    摔提挺严重呀。祝早日康复!:heo-感动:
    粽叶加米 • 时间 2024年03月26日 11:47:30
    这一看就好痛,本好奇宝宝曾经让汽修厂的升降机烟断过脚趾头。单腿蹦哒了三个月。:heo-泪奔:
    obaby • 时间 2024年03月26日 10:47:39
    @ 林羽凡开玩笑的,不会跑,我被cc,还是他给我解决的,当然备份还是必须的。数据安全第一,用谁的服务器都得备份。
    jeffer.z的博客 • 时间 2024年03月26日 09:12:10
    我也是软云????,一夜之间都在用,这要是jun跑路了,他就在博客圈火了,明天我也写一篇我和他的事情,很有意思。
    jeffer.z的博客 • 时间 2024年03月25日 23:30:05
    这得好好休息一段时间了
    dujun • 时间 2024年03月25日 21:29:29
    也是蛮厉害的人,完骑车才骑十多公里。
    惭愧呀,我得慢慢努力啦。
    争取早日摆脱菜腿称号。:heo-笑哭:
    Net • 时间 2024年03月25日 17:17:13

再了解一下?

  • 林羽凡待办
取消
支付宝二维码
支付宝二维码
微信二维码