最近把我自己的網站升級生成前后端分離的項目（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 {
}
}