目录
1. Ajax请求服务介绍
- xhr: new XHLHttpRequest().open()/send()。偏向底层
- JQuery: 对xhr进行了封装。提供$get、$post等API。封装了太多DOM操作,不适合Vue
- axios: 基于promise的网络请求库,支持请求拦截器和响应拦截器,体积小,只有JQuery的1/4
- fetch:
Window.prototype
上直接有这个方法,也是基于promise的。但是会将返回的请求包两层promise,需要两次.then才能拿到请求,IE浏览器兼容性差
2. axios的安装
使用命令cnpm install axios
安装项目包
3. Vue跨域问题介绍和解决方案
- Vue使用Axios请求不同端口的服务,会出现类似下面的错误。即CORS跨域问题
Access to XMLHttpRequest at 'http://localhost:5000/students' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- 只要【协议名】【IP】【端口】不同的服务请求就会出现跨域问题
- 出现跨域问题,服务器能接收到请求,浏览器也能接收到数据,但是浏览器发现存在跨域问题,就对数据进行拦截,Axios出现error报错
- 解决跨域问题的方法
- 服务器可以给Header中配置Access-Control-Allow-Origin,这样浏览器就不会进行数据的拦截,但是安全性不高
- jsonp解决跨域问题,借助script标签的src属性,在引入外部资源的时候,不受同源策略限制,需要前后端配置,而且只能解决get请求跨域问题,所以用的少
- 配置代理服务器。代理服务器和运行的Vue服务在同一台服务器,而且端口是一样的。虽然代理服务器和返回数据的服务器端口不一样,但是他们之间通信不用前端的Ajax,即不存在跨域问题。代理服务器种类
- Nginx
- vue-cli
4. 使用vue-cli配置开发环境代理服务
4.1 简单配置
在vue