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 { } }