vue - axios 前后端分离 跨域访问的实现
程序员文章站
2022-07-10 10:41:10
...
一. 基本环境
- 前端
- vue:2.5.6
- axios:0.18
- 使用vue脚手架构建项目。参照:webstorm搭建vue项目
- 后台
- ssm框架
- 前后端数据采用json格式传输
二. 前端配置
-
axios配置
- 安装
npm install axios --save
-
在所需组件中引入axios
import axios from 'axios';
-
在<script>中配置axios参数
const myaxios = axios// 不跨域的axios // 如果要跨域的话, 对axios进行一些设置,当前使用的是跨域的 const axiosInstance = axios.create({ headers: {'Content-Type': 'application/json;charset=utf-8'},// 设置传输内容的类型和编码 withCredentials: true,// 指定某个请求应该发送凭据 });
如图:
- 安装
配置代理
打开config/index.js文件,找到dev对象里面的proxyTable修改为如下内容:
proxyTable: {
'/api': {
target:'http://127.0.0.1:80',
changeOrigin:true,
pathRewrite:{
'^/api': ''
}
}
},
target 的参数就是你要访问的服务器地址, 你在代码里面写/api就等于写了这个地址 , 比如我要访问http://127.0.0.1:80/vue-ssm/login这个接口在代码里面只需写/api/vue-ssm/login就可以了
- 使用axios发送请求
// 跨域访问
axiosInstance.post('/api/vue-ssm/login', 请求的参数,)
.then( response => {
console.log(response.data);// response.data为后端返回的具体数据
alert("请求成功");
})
.catch( error => {
alert("请求失败");
});
如图:
axios详细参数配置可以参考:Axios 中文说明
三. 后端配置
- 使用SpringMvc的HandlerInterceptorAdapter拦截器
public class RquestInterceptor extends HandlerInterceptorAdapter {
/**
* 预处理回调方法,实现处理器的预处理(如检查登陆),第三个参数为响应的处理器,自定义Controller
* 返回值:true表示继续流程(如调用下一个拦截器或处理器);false表示流程中断(如登录检查失败),
* 不会继续调用其他的拦截器或处理器,此时我们需要通过response来产生响应;
*/
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
throws Exception {
System.out.println("beforeAction");
// 当Access-Control-Allow-Credentials设为true的时候,Access-Control-Allow-Origin不能设为星号
response.setHeader("Access-Control-Allow-Credentials", "true");
// 可以指定特定的ip:port
//response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:9006, http://127.0.0.1:8080");
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));// *
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, accept, content-type, xxxx");// * ;
response.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,PUT,OPTIONS,DELETE,HEAD");
response.setHeader("Content-Type", "application/json");
String method= request.getMethod();
System.out.println(method);
return true;
}
/**
* 后处理回调方法,实现处理器的后处理(但在渲染视图之前),此时我们可以通过modelAndView(模型和视图对象)
* 对模型数据进行处理或对视图进行处理,modelAndView也可能为null。
*/
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
super.postHandle(request, response, handler, modelAndView);
}
/**
* 整个请求处理完毕回调方法,即在视图渲染完毕时回调,如性能监控中我们可以在此记录结束时间并输出消耗时间,
* 还可以进行一些资源清理,类似于try-catch-finally中的finally,但仅调用处理器执行链中
*/
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
throws Exception {
super.afterCompletion(request, response, handler, ex);
}
/**
* 处理异步请求
* 不是HandlerInterceptor的接口实现,是AsyncHandlerInterceptor的
* AsyncHandlerInterceptor实现了HandlerInterceptor
*/
public void afterConcurrentHandlingStarted(HttpServletRequest request, HttpServletResponse response, Object handler)
throws Exception {
super.afterConcurrentHandlingStarted(request, response, handler);
}
}
- 配置到SpringMvc配置文件
<mvc:interceptors>
<!-- 注意拦截器的执行顺序,会按照这里配置顺序执行 -->
<mvc:interceptor>
<mvc:mapping path="/**" /><!--匹配所有路径-->
<bean class="com.ysl.interceptor.RquestInterceptor" />
</mvc:interceptor>
<!-- 其他拦截器 -->
<mvc:interceptor></mvc:interceptor>
</mvc:interceptors>
好了,这就是我使用axios实现跨域访问的全过程,希望对大家有所帮助。
参考:
https://blog.csdn.net/huang100qi/article/details/77132096
https://blog.csdn.net/qq_22844483/article/details/78661030
https://www.jianshu.com/p/1e8d088c2be9
推荐阅读
-
vue中axios访问Java后端跨域问题解决
-
vue使用axios插件请求访问API遇到的跨域问题。
-
vue+springboot前后端分离实现单点登录跨域问题解决方法
-
vue - axios 前后端分离 跨域访问的实现
-
vue前后端分离开发解决跨域的问题
-
nginx+vue+uwsgi+django的前后端分离项目部署(解决前后端静态资源下载跨域问题)
-
解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
-
vue中axios访问Java后端跨域问题解决
-
vue+springboot前后端分离实现单点登录跨域问题解决方法
-
vue使用axios插件请求访问API遇到的跨域问题。