axios解决跨域问题

最近把我自己的网站升级生成前后端分离的项目（vue+springBoot）,不可避免的就遇到了跨域问题。从中学到了许多知识，随便分享出来，也巩固下所学。

谈到跨域，首先得了解CORS（Cross origin resource sharing） 跨域资源共享，它是w3c的一个标准，是一份浏览器技术规范，提供了web服务从不同网域传来沙盒脚本的方法，以避免浏览器的同源策略，是比JSONP模式的高级版。JSONP只支持GET请求方式，而CORS除了GET请求方式以外也支持其他的HTTP请求。CORS允许浏览器发送跨域服务器，发出XMLHttpRequest请求，从而克服AJAX只能同源请求。（想要了解为什么有跨域问题的产生，请了解浏览器的同源策略）

浏览器发出CORS请求，需要对请求头增加一些信息，服务器会根据这些信息来是否决定同意这次请求。需要的头信息字段如下：

（1）Access-Control-Allow-Origin

这个头信息字段是必须的。它指定允许进入来源的域名、ip+端口号 。 如果值是 ‘*’ ，表示接受任意的域名请求，这个方式不推荐，主要是因为其不安全，而且因为如果浏览器的请求携带了cookie信息，会发生下图错误：

（2） Access-Control-Allow-Credentials

该字段是可选的。它设置是否可以允许发送cookie，true表示cookie包含在请求中，false则相反，默认为false。如果项目需要cookie就得设置该字段了。CORS请求默认不发送Cookie和HTTP认证信息的，所以在此基础上同时也需要在前端设置（以axios为例）： axios.defaults.withCredentials = true

（3）Access-Control-Max-Age

该字段是可选的。用于配置CORS缓存时间，即本次请求的有效期，单位为秒。

（4）Access-Control-Allow-Methods

该字段可选。设置允许的请求方法。

（5）Access-Control-Allow-Headers

该字段可选。设置允许的请求头信息

（...）其他请参考相关资料

提示：这些设置在后端的拦截器中设置。

对于axios，它是vue2提倡使用的轻量版的ajax。它是基于promise的HTTP库。它会从浏览器中创建XMLHttpRequests。如果对axios不太了解，可以先看下这个两个博客：https://www.kancloud.cn/yunye/axios/234845    和   https://www.jianshu.com/p/7a9fbcbb1114

了解到这些之后就可以解决跨域问题啦， 详细代码如下：

（1） vue.js

import axios from 'axios'
import store from '../store'
import { getToken } from '@/utils/auth'
import { Message, MessageBox } from 'element-ui'
// 每次请求携带cookies信息
axios.defaults.withCredentials = true
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 15000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
console.log(store.getters.token)
if (store.getters.token) {
console.log(getToken())
config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
var token = getToken()
Object.assign(config.headers, { 'token': token })
}
return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(
response => {
/**
* code为非20000是抛错 可结合自己业务进行修改
*/
console.log(response.data)
const res = response.data
if (res.code !== 20000) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})

// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
})
}
return null
} else {
return response.data
}
},
error => {
if (error.message === 'Network Error' && error.config.url.endsWith('/license')) {
Message({
message: '无法连接到本地代理程序，请确认代理程序是否运行正常！',
type: 'error',
duration: 5 * 1000
})
} else {
console.log(error + ' ' + error.config.url) // for debug
Message({
message: error.message + ' ' + error.config.url,
type: 'error',
duration: 5 * 1000
})
}
return Promise.reject(error)
}
)
export default service
 (2)springBoot

package xin.toheart.door.filter;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;
import java.util.HashSet;
import java.util.Set;

@WebFilter(urlPatterns = { "/*" }, filterName = "loginAuthFilter")
public class LoginAuthFilter implements Filter {
private static Logger logger = LoggerFactory.getLogger(LoginAuthFilter.class);

@Override
public void destroy() {

}

@Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest) request;
HttpServletResponse rep = (HttpServletResponse) response;
// 设置允许多个域名请求
String[] allowDomains = {"http://www.toheart.xin","http://192.168.10.213:8080","http://localhost:8080"};
Set allowOrigins = new HashSet(Arrays.asList(allowDomains));
String originHeads = req.getHeader("Origin");
if(allowOrigins.contains(originHeads)){
//设置允许跨域的配置
// 这里填写你允许进行跨域的主机ip（正式上线时可以动态配置具体允许的域名和IP）
rep.setHeader("Access-Control-Allow-Origin", originHeads);
}

// 设置服务器允许浏览器发送请求都携带cookie
rep.setHeader("Access-Control-Allow-Credentials","true");
// 允许的访问方法
rep.setHeader("Access-Control-Allow-Methods","POST, GET, PUT, OPTIONS, DELETE, PATCH");
// Access-Control-Max-Age 用于 CORS 相关配置的缓存
rep.setHeader("Access-Control-Max-Age", "3600");
rep.setHeader("Access-Control-Allow-Headers","token,Origin, X-Requested-With, Content-Type, Accept,mid,X-Token");
response.setCharacterEncoding("UTF-8");
// response.setContentType("application/json; charset=utf-8");
chain.doFilter(request, response);
}

@Override
public void init(FilterConfig arg0) throws ServletException {

}

}