166.Vue-cli实现跨域请求【fetch/axios/proxytable】2019.03.16
0、知识点
- vue cli脚手架跨域请求
- proxytable
- postman接口调试工具
1、postman接口调试工具
- 要调试的接口地址
- 点击send按钮,返回信息【success:0 失败 ,success:1 成功】
- 在body中,设置两个属性、值, username和password,会返回“token错误!”
- 在header当中,设置token,并赋上一个代码当中写好的值或者动态生成的值,点击send按钮,会返回一个“请求成功!”的信息
2、在代码中测试能否成功请求到跨域的接口
- 要测试的接口文档
3、fetch请求方式 - 在App.vue中,实现fetch的请求方式
- 启动当前的项目
- 请求失败的截图,表示未能请求到跨域接口
- vue proxyTable
- 在config文件夹下面的index.js文件中,配置接口域名、是否跨域等参数
- /apis 替换跨域接口地址
- 配置完,需要重启项目,此时,没有报任何跨域的错误信息
- 但是,这里有一个ReadableStream,这是一个可读的流,我们需要对其进行json解析
- 让其返回json对象
- 输出错误信息,“访问不合法!”因为我们没有给传一个正确的body数据进去
- 在fetch中,使用JSON.stringify()传递正确的参数
- 返回一个“token错误!”的报错信息
- 在headers中,设置一个token
- 成功返回“请求成功!”的信息
4、axios请求方式 - 安装axios
- 在main.js中,实现axios原型的全局访问方式
- App.vue中,实现axios的psot方法请求接口地址方式
- 返回一个“token错误!”提示信息
- 在main.js中,设置token,可以设置post、get以及common方式,并设置请求头
- 设置post请求头