- cookie 在項目裏經常使用,一個cookie在由一個服務器產生在另一個服務器裏需要用到,這就產生了cookie的跨域問題。
- 由於瀏覽器安全策略,cookie只能在同一域名產生和使用。
- 看一個cookie的組成:
- 可以看到首先是cookie的name,value。
- Domain 是指cookie的域名。當訪問localhost 的接口時會自動攜帶cookie。
- 跨域:指前端頁面和前端要訪問的接口不在同一個域名下,就產生了跨域問題。
- domain 設置爲 test.com ,那麼訪問a.test.com 頁面去訪問b.test.com 就可以攜帶cookie,後端通過設置Cross,前後端都需要設置Credentials爲true,這樣就可以攜帶a的cookie給b 的後端。
- 後端設置cross:
@Component public class CrossFilter implements Filter { @Override public void destroy() { } @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { try { HttpServletRequest httpRequest = (HttpServletRequest) request; HttpServletResponse httpResponse = (HttpServletResponse) response; // 跨域 String origin = httpRequest.getHeader("Origin"); // 這裏不能使用addHeader 方法,使用setHeader,獲取到的httpResponse,已經攜帶Access-Control-Allow-Origin // 這個頭,默認爲 * if (origin == null) { httpResponse.setHeader("Access-Control-Allow-Origin", "*"); } else { httpResponse.setHeader("Access-Control-Allow-Origin", origin); } httpResponse.addHeader("Access-Control-Allow-Headers", "Content-Type,X-Cookie"); httpResponse.addHeader("Access-Control-Allow-Credentials", "true"); httpResponse.addHeader("Access-Control-Allow-Methods", "GET,POST,PUT,OPTIONS,DELETE"); if ( "OPTIONS".equals(httpRequest.getMethod())) { httpResponse.setStatus(HttpServletResponse.SC_OK); return; } chain.doFilter(request, response); } catch (Exception e) { throw e; } } @Override public void init(FilterConfig arg0) throws ServletException { } }
-
前端vue 設置在main.js裏,
axios.defaults.withCredentials = true; //讓ajax攜帶cookie
跨域cookie 解決方案
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.