axios
axios是什么
-
易用、简洁且高效的http库
-
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特性
-
从浏览器中创建 XMLHttpRequests
-
从 node.js 创建 http 请求
-
支持 Promise API
-
拦截请求和响应
-
转换请求数据和响应数据
-
取消请求
-
自动转换 JSON 数据
-
客户端支持防御 XSRF
安装
npm install axios
引用
全局引用
-
在main.js中引入
//引入axios
import axios from 'axios';
Vue.prototype.$axios = axios;
-
在login.vue中调用
this.$axios.get('url')
局部引用
-
在script中:import axios from 'axios'
-
在methods中:axios.get('url')
请求
axios.get('url',{
params:{id:1,name:'zs'}
})
.then(response => {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
}).catch(function(error) {
if (error.response) {
console.log("收到服器响应信息")
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
console.log("错误的请求")
console.log(error.request);
} else {
console.log('Error', error.message);
}
console.log(error.config);
});
服器充许跨域请求
-
创建CrossFilter
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* 充许跨域请求
*/
public class CrossFilter implements Filter {
private boolean isCross = false;
@Override
public void destroy() {
isCross = false;
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest) request;
HttpServletResponse res = (HttpServletResponse) response;
System.out.println("拦截请求: " + req.getHeader("Origin"));
if (isCross) {
//允许任意domain访问
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Credentials", "true");
//allow-headers为*,允许所有的请求头
res.setHeader("Access-Control-Allow-Headers",
"Accept,Accept-Encoding,Accept-Language,Connection,Content-Length,Content-Type, Cookie,Host,Origin,Referer,User-Agent, Authorization,X-Requested-With,OsType");
//充许请求方式
res.setHeader("Access-Control-Allow-Methods", "POST,GET, HEAD,PUT, DELETE, TRACE, OPTIONS");
}
if ("OPTIONS".equalsIgnoreCase(req.getMethod())) {
response.getOutputStream().close();
} else {
chain.doFilter(req, res);
}
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
String isCrossStr = filterConfig.getInitParameter("IsCross");
isCross = isCrossStr.equals("true") ? true : false;
}
}
-
在web.xml文件中部署
<!-- 跨域请求 -->
<filter>
<filter-name>CrossFilter</filter-name>
<filter-class>com.zking.ssm.filter.CrossFilter</filter-class>
<init-param>
<param-name>IsCross</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CrossFilter</filter-name>
<url-pattern>/api/*</url-pattern>
</filter-mapping>
浏览器封装请求,向服器询问是可以跨域请求;请求中携带了Origin参数,其值发出请求的源地址
服器收到请求之后,在响应流的头部添加了充许跨域请求的信息,并将内容响应给客户端
浏览器收到服器响应信息之后,浏览器根据是否充许跨域请求,做出相应的处理;如果不充许,浏览器报错;
如果充许,浏览器再一次发送请求
服器充许请求资源