vue开发中遇到的问题以及解决方案

一:vue-cli的proxy代理解决跨域问题

前端开发中难免会遇到Ajax请求和服务器不同源的问题,使得Ajax请求回来的响应被浏览器拦截,从而报错,想要避免应为跨域问题影响我们前端项目开发的进度,我们在开发中可以使用vue-cli配置代理,使用代理服务器发送Ajax请求和代理服务器接受Ajax请求来避免不同源的问题

工作原理如下图

当直接访问产生跨域的时候,我们使用vue-cli进行代理服务器,

1. vue-cli脚手架工具在启动时，会开启一个前端项目的服务器。在同一局域网中的用户都可以通过ip地址来访问。
2. vue-cli脚手架支持配置一个代理： 将指定的类型请求，转发到目标服务器。
3. 代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
4. 代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

这样，我们就可以通过服务器代理做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。

二: localstorage和cookie的区别

cookie是什么?

        cookie是当你浏览某个网站的时候，由web服务器存储在你的机器硬盘上的一个小的文本文件。它其中记录了你的用户名、密码、浏览的网页、停留的时间等等信息。 当你再次来到这个网站时，web服务器会先看看有没有它上次留下来的cookie。如果有的话，会读取cookie中的内容，来判断使用者，并送出相应的网页内容，比如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。

localStorage是什么?

localStorage是持久化的本地存储，除非是通过js删除，或者清除浏览器缓存，否则数据是永远不会过期的。

两者的作用(相同点):

localStorage是H5中的一种浏览器本地存储方式，而实际上，cookie本身并不是用来做服务器存储的。但在 localStorage 出现之前，cookie被滥用当做了存储工具，什么数据都放在cookie中，即使这些数据只在页面中使用、而不需要随请求传送到服务端（当然cookie也做了一些限制：大小受限、每个域名下生成的cookie数量受限）。

区别:

1 可允许的最大存储量

 cookie单个的最大存储为4k，如果大于4k，则存储失败，浏览器中找不到对应的cookie信息；
  localStorage的最大存储为5m。如果大于这个最大限制浏览器提示出错

2 存储时间

cookie默认是会话级存储，可以设置过期时间

localStorage是持久化存储，除非主动clear掉,只要不删除就一直存在

3 可操行

cookie可以设置作用范围,过期时间等等

localStorage只能用于存储数据

4 使用场景

cookie的使用场景一般是作为客户端与服务端的一种信息传递，当添加了cookie，默认的同源的cookie信息会自动作为请求头的一部分被发送到服务端

localStorage一般仅用作客户端的数据存储，如存储一个异步请求的结果数据，然后在页面重渲染时，可以直接读取storage中的数据，减少一次请求的发送