Target&StepTwo——和后端进行联调(二)
我是基于原项目进行修改的,可以Start我的仓库,相关笔记和代码都会实时更新的。点击这里
😁🌈🌈
环境变量
.env、.env.development和.env.development三个文件,文件名解释分别如下:
.env 全局默认配置文件,不论什么环境都会加载合并。并且修改配置文件需要重启项目才能生效。
.env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件
关于文件中的内容:必须以VUE_APP_开头
关于文件的加载:根据文件名进行加载
而我们这个项目呢可以看到有两个配置文件.env.development,.env.development,我们是通过vue.config.js进行构建。
文件内容及字段说明
NODE_ENV
:可以设置为其他值,比如"test",但是打包后的目录结构和"production"不一样,所以还是设置为"production",通过"VUE_APP_MODE"变量来区分环境VUE_APP_MODE
:线上测试环境VUE_APP_BASE_API
:api调用地址outputDir
:打包生成的文件夹名称,默认是’dist’
在vue.config.js中通过process.env.+字段
process.env.NODE_ENV
来执行判断环境
process.env.VUE_APP_*
来获取其环境变量
process.env.BASE_URL
来获取你的应用会部署到的基础路径,和 vue.config.js
中的 publicPath
选项相符
前后端进行联调
官方给的是模版,mock模拟后端项目,但是在现实开发项目中,我们在与后端沟通好的情况下,借助Swagger平台,让后端模拟业务数据。
说到这里我们来复习一下什么是跨域?为什么会出现跨域?我们在这个项目中是如何解决的?
什么是跨域?
当前的url分别由协议+域名+端口+请求资源路径
如果协议,域名,端口任意一个不一样就会出现跨域问题,就好像是我们的身份证是属于中国的,但是那出国了,就像是跨域,身份证在当前国家享有在自己国家的权限。
为什么会出现跨域?
这是因为浏览器的同源的问题,为了浏览器的安全,那么常见的浏览器安全有哪些呢?
XXR,CSRF。
XXR
原理:恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码,当用户浏览该页之时,嵌入其中 Web 里面的脚本代码会被执行,从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。
CSRF
原理: 诱导用户打开黑客的网站,在黑客的网站中,利用用户登录状态发起跨站点请求。
web安全(xss/csrf)简单攻击原理和防御方案(实战)
我们在这个项目中是如何解决的?
因为我这个项目是前后端分离的,和官网不一样的地方就是,官网mock模拟数据,而我直接是通过向后端发起请求(@/api/user)获得路由表。我是采用Vue-cli的 devServer
属性进行代理,基于axios封装工具包request.js(可以理解为是发送请求工具)
说到这里我们就想知道为什么代理能解决跨域呢?
因为代理起到一个代转发的角色,在这个项目中我们利用/api
标识,想代理发起基于根目录下的请求,例如http://localhost:8089/api
对浏览器它确实没有跨域,而代理自己没有浏览器的同源政策!然后他再发给后端请求就好啦
还有其他解决跨域方案吗?
其实可以分为三大类:
请求跨域了,那么请求到底发出去没有?
跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求,为什么 Ajax 就不会?因为归根结底,跨域是为了阻止用户读取到另一个域名下的内容,Ajax 可以获取响应,浏览器认为这不安全,所以拦截了响应。但是表单并不会获取新的内容,所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF,因为请求毕竟是发出去了。