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请求头
