Axios的使用及跨域处理

#Axios的使用及跨域处理| 来源: 网络整理| 查看: 265

Axios是一个开源的、可以在浏览器端和node.js的异步通信框架，它的主要作用就是实现ajax异步通信。

axios的实现异步通信功能特点有如下几种：

从浏览器中间创建xmlhttprequest从node.js创建http请求支持promise api拦截请求和响应转换请求数据和响应数据取消请求自动转换json数据客户端支持防御XSRF（跨域请求伪造） 1.1 为什么使用axios呢？

由于vue.js是一个视图层框架并且作者（尤玉溪）严格遵守soc（关注度分离原则），所以vue.js并不包含ajax的通信功能，为了解决通信功能，作者单独开发了一个名为vue-resource的插件，但是在2.0之后停止了对该插件的维护，并推荐了Axios框架

1.2 Axios的使用：

第一步：新建一个webpack-simple项目后，安装vue axios

npm install --save axios vue-axios

第二步：在main.js文件中对axios进行引入（在项目中使用axios模块）

import Vue from 'vue' import App from './App.vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,axios) new Vue({ el: '#app', render: h => h(App) })

第三步：发送Ajax请求

this.axios({ method:'get', url:'http://localhost:8080/Ssm-demo01/regist?mail='+this.mail+'&password='+this.password, data:{} }).then(function (response) { console.log(response.data) })

第四步：在服务端处理跨域问题。处理跨域之前首先要有一个后端工程（ssm、ss）都可，这里用的是用ssm搭建的后端，后端搭建可参考ssm后端搭建。搭建好后在springmvc.xml中加入下列代码处理跨域问题

后端controller代码：

package com.xgsm.Controllers; import com.xgsm.pojo.User; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; @Controller @ResponseBody public class axiosController { @RequestMapping(value = "regist") public User regist(String mail, String password){ System.out.println(mail); System.out.println(password); User user = new User(1,"zhangsan","dsdsdss"); return user; } }

跨域问题指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，指的是浏览器对JavaScript施加的安全限制，跨域处理：

第五步：在apipost中进行后端接口测试，测试成功后返回user对象

1.3 发送ajax请求的两种方式 1.3 发送get请求 this.axios({ method:'get', url:'http://localhost:8080/Ssm-demo01/regist?mail='+this.mail+'&password='+this.password, data:{} }).then(function (response) { console.log(response.data) }) 1.4 发送post请求 this.axios({ method:'get', url:'http://localhost:8080/Ssm-demo01/regist, data:{ mail:this.mail， password:this.password} }).then(function (response) { console.log(response.data) })

【本文地址】

Axios的使用及跨域处理

Axios的使用及跨域处理

今日新闻

推荐新闻