Vue ------＞axios基础配置说明 + java服务端跨域配置

直接上代码说明，可以根据自己的需求抽取相应的配置
vue axios配置

import axios from 'axios'

// 初始化axios配置
const service = axios.create({
  // 服务的接口地址
  baseURL: 'localhost:8080/apiurl',
  // 是否使用预请求(跨域必须配置，客户端每次接口会发起两次请求)
  withCredentials: true,
  // 响应超时时间
  timeout: 5000
})

// 请求报文设置
service.interceptors.request.use(
  config => {
    // 判断是否存在token，如果存在的话，则配置请求头部每个http header都加上token
    if (localStorage.getItem("apitoken")) {
      config.headers["apitoken"] = localStorage.getItem("apitoken");
    }
    // 查看当前请求的data是否传递了文件，如果有的话使用formDta封装请求服务端
    //这里file和file1都是文件数组，本人这边有两种较为复杂的文件传输方式，大多数时候只配置一个file参数做判断即可
    if (config.data && (config.data.file || config.data.file1)) {
      config.data = formData(config.data);
      return config;
    }
    //特殊请求过滤，不对请求的data做任何操作，多用于服务端需要json格式的数据
    if (config.type == "formData" || config.method != "post" ||
    (config.headers["Content-Type"] && config.headers["Content-Type"].indexOf("form-data") > 0)) {
      return config;
    }
    //qs序列化请求参数，使参数变为表单形式提交
    config.data = qs.stringify(config.data);
    return config;
  },
  err => {
    return Promise.reject(err);
  }
)

// 返回报文设置，数据的过滤可以在这里操作
//这里以我的服务端参数返回结构为列
{
'rolestate':true,//当前请求的接口是否有权限
'loginstate':true,//当前请求的接口是否是登录状态
'data':{}//以上两个参数都为true时，data中会对应返回需要的数值
}
service.interceptors.response.use(
  response => {
    const res = response.data
    //接口是否请求成功
    if(+response.status === 200){
    	//权限判断
		if(res.rolestate === false){
		//丢你个嗨小孩子不要看这种东西
		}
		//登录状态判断
		else if(res.loginstate === false){
		//臭子你都没有登录
		}
		//爸爸这是你想要的信息
    	return res.data;
    }
    return res
  },
  error => {
    return Promise.reject(error)
  }
)
export default service

下面是java服务端的跨域配置分享给大家
分享之前，在网上看到了诸多内容，无非就是在登录拦截器中配置跨域请求，虽说这个思路是正确的，但是本人建议如果说当前的服务只管前端接口那么可以在首要触发的拦截器去做这个配置，Springmvc的同志可以自己在web.xml中配置一个拦截器作为首要触发，springboot的同志可以才@config中配置一个首要触发的拦截器。
有人问：你动不动就拦截器，拦截器，到底是要做啥。
这位同学问的好，网上大多数教程只写上了配置可是却没有详细的解释为啥这么做，上代码

	/**
	* vue跨域设置
	* 前后端交互当中，既然在请求时知道了当前的请求时跨域操作，那么前后端接口在请求时request的入口已经打通；
	*那此时就需要针对返回时的response进行操作，将请求时的请求头参数完美的复制到response返回中，就可以确保数据能够成功的返回给前端
	/
	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
			 // 编码
			 response.setCharacterEncoding("UTF-8");
			 // 请求格式
			 response.setContentType("application/json; charset=utf-8");
			 // 跨域请求
			 response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
			 // 所有方法可以跨域，此处配置为*，也可以配置为post or get..
			 response.setHeader("Access-Control-Allow-Methods", "*");
			 // 运训跨域请求
			 response.setHeader("Access-Control-Allow-Credentials", "true");
			 // 此处极为重要，允许跨域的请求头参数，你需要去核对你的前端每一个接口请求头参数有哪些然后加入到这个配置中
			 //Content-Type 请求头
			 //apitoken token
			 //Set-Cookie 不设置必定导致cookie失效，session不一致，每次会话都会是新的无法缓存数据
			 //其他请求头参数自行百度
			 response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token,apitoken,Set-Cookie");
			return true;
	}