和我一起解刨基于Vue2.0+Vuex+element-ui的后台管理(二)之如何和后端进行联调

Target&StepTwo——和后端进行联调(二)

我是基于原项目进行修改的，可以Start我的仓库,相关笔记和代码都会实时更新的。点击这里

😁🌈🌈

环境变量

​ .env、.env.development和.env.development三个文件，文件名解释分别如下：

• .env 全局默认配置文件，不论什么环境都会加载合并。并且修改配置文件需要重启项目才能生效。

• .env.development 开发环境加载的配置文件

• .env.production 生产环境加载的配置文件

• 关于文件中的内容：必须以VUE_APP_开头

• 关于文件的加载：根据文件名进行加载

让你秒懂 Vue .env .env.development .env.production

而我们这个项目呢可以看到有两个配置文件.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，因为请求毕竟是发出去了。

参考