vue配置代理解决跨域问题

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

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