Vue跨域问题、Vue配置开发环境代理服务、集成Axios发送Ajax请求、集成vue-resource发送Ajax请求

1. Ajax请求服务介绍

  1. xhr: new XHLHttpRequest().open()/send()。偏向底层
  2. JQuery: 对xhr进行了封装。提供$get、$post等API。封装了太多DOM操作,不适合Vue
  3. axios: 基于promise的网络请求库,支持请求拦截器和响应拦截器,体积小,只有JQuery的1/4
  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报错
  • 解决跨域问题的方法
    1. 服务器可以给Header中配置Access-Control-Allow-Origin,这样浏览器就不会进行数据的拦截,但是安全性不高
    2. jsonp解决跨域问题,借助script标签的src属性,在引入外部资源的时候,不受同源策略限制,需要前后端配置,而且只能解决get请求跨域问题,所以用的少
    3. 配置代理服务器。代理服务器和运行的Vue服务在同一台服务器,而且端口是一样的。虽然代理服务器和返回数据的服务器端口不一样,但是他们之间通信不用前端的Ajax,即不存在跨域问题。代理服务器种类
      1. Nginx
      2. vue-cli

4. 使用vue-cli配置开发环境代理服务

4.1 简单配置

在vue

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值