Vue学习-基础篇10

目录

proxy

Vue-Cli配置跨域代理

为什么会出现跨域？

解决跨域问题

mixin

自定义指令-解决异常图片情况

自定义指令

在main.js完成自定义指令全局注册

watch

---

proxy

目标:解决跨域问题.

• 先让后端解决,如果后端 开发环境不解决,我们就自己解决,但是生产环境一定是后端解决.

• 开发环境解决跨域

  • 跨域原因:同源(协议,端口,域名)问题

    • 服务器请求服务器是没有问题的

        1:希望带上需要代理的请求地址,让接口的基地址就是真实接口基地址最后一截
        /public就是接口基地址
        '/public':{
          target:'http://127.0.0.1/heimamm'
        }
        2:接口基地址不属于真实地址的一部分
        "/xxx(任意定义的基地址)":{
          target:"http://127.0.0.1/heimamm/public(完整 基地址)",
          pathRewrite:{
            '^/xxx':""
          }
        }

Vue-Cli配置跨域代理

目标: 通过配置vue-cli的代理解决跨域访问的问题

为什么会出现跨域？

当下,最流行的就是前后分离项目,也就是前端项目和后端接口并不在一个域名之下，那么前端项目访问后端接口必然存在跨域的行为.

 

怎么解决这种跨域 ？

请注意，我们所遇到的这种跨域是位于开发环境的，真正部署上线时的跨域是生产环境的

解决跨域问题

开发环境的跨域

开发环境的跨域，也就是在vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题

这就是vue-cli配置webpack的反向代理

采用vue-cli的代理配置

vue-