vue配置代理解决跨域问题

情景：前后端分离经常需要解决的一个重大问题就是跨域，经常是后端人员配置允许跨域访问，但是前端有些好用的框架也可以很方便的解决跨域问题。这里记录一下vue解决跨域问题的一种方法。
说明：vue项目启动时默认的端口是8080（可以在config目录下的index.js文件中修改），跟后端的端口肯定不一样，这样vue页面请求后端接口的时候，由于端口不一致，肯定就存在跨域问题，而vue可以通过代理很好的解决跨域问题。
解决方法：

1. 修改 build 目录下的 webpack.dev.conf.js 文件，添加代理对象
   
   说明：
   ① 蓝色框是初始化的时候的样子
   ② 蓝色框下面是配置之后的样子
   ③ ‘/product/*’ 表示前端的请求路径是以product开头的时候进行拦截，target 表示后端接口的基础路径（ip + 端口），拦截之后会将后端接口的基础路径加在请求的相对路径之前，拼接成完整的路径，changeOrigin 表示允许跨域。
2. 在项目 src 目录下新建 utils 目录，在 utils 目录下新建 utils.js 文件，文件内容如下图，目录名称和文件名称随意
   
3. 在页面上请求接口，拿到数据进行渲染
   
   
   说明：先把这个方法记录下来，以后发现什么好的解决办法再来补充一下