一. 基本环境

• 前端
  vue：2.5.6
  axios：0.18
  使用vue脚手架构建项目。参照：webstorm搭建vue项目
• 后台
  ssm框架
• 前后端数据采用json格式传输

二. 前端配置

• axios配置

1. 安装：npm install axios --save

2. 在所需组件中引入axios：

   import axios from 'axios'; 
   

3. 在<script>中配置axios参数

   const myaxios = axios// 不跨域的axios
   // 如果要跨域的话, 对axios进行一些设置,当前使用的是跨域的
   const axiosInstance = axios.create({
   	headers: {'Content-Type': 'application/json;charset=utf-8'},// 设置传输内容的类型和编码
   	withCredentials: true,// 指定某个请求应该发送凭据。允许客户端携带跨域cookie，也需要此配置
   });
   

   

• 代理配置
  打开config/index.js文件，找到dev对象里面的proxyTable修改为如下内容：

  proxyTable: {
    '/api': {
      target:'http://127.0.0.1:80',
      // secure: false, // 如果是https接口，需要配置这个参数
      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 {
  		// 允许客户端携带跨域cookie
  		// 当Access-Control-Allow-Credentials设为true的时候，Access-Control-Allow-Origin不能设为星号
  		response.setHeader("Access-Control-Allow-Credentials", "true");
  		// 允许指定域访问跨域资源
  		//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", request.getHeader("Access-Control-Request-Headers"));// *
  		// 允许浏览器在预检请求成功之后发送的实际请求方法名
  		response.setHeader("Access-Control-Allow-Methods", request.getHeader("Access-Control-Request-Method"));
  		// 设置响应数据格式
  		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
https://segmentfault.com/a/1190000015597029