vue 技术栈进阶 （07. ajax 请求实战）

跨域问题

方案一

前端设置代理，来解决浏览器的同源政策

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200420173401536.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70)

方案二

后端进行设置 ， 请求头的信息 来解决 跨域问题

axios 封装

config / index.js 来 填写 关于项目的 一些 请求 基础 配置。
在这里插入图片描述

lib / axios.js 来 封装 axios
![在这里插入图片描述]( https://img-blog.csdnimg.cn/2020042018221579.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg,size_16,color_FFFFFF,t_70)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200420182238688.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg,size_16,color_FFFFFF,t_70)

在 api/ index.js 中 创建一个 axios 实例对象 (api 下存放 跟 发送请求 相关 的业务逻辑代码)

在这里插入图片描述

在 api/user.js 下 写 请求 根 用户 信息 相关 的 模块 代码
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200420181558923.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5ODEwMg==,size_16,color_FFFFFF,t_70)

posted @ 2020-04-20 18:25  jacksonni  阅读(238)  评论(0)    收藏  举报