詳解springboot和vue前后端分離開發(fā)跨域登陸問題

發(fā)布時間：2020-09-28 01:10:27 來源：腳本之家閱讀：135 作者：君莫笑欄目：編程語言

前后端分離開發(fā)中，一般都會遇到請求跨域問題。而且一般也會遇到登陸失效問題。今天就以springboot和vue為例來看如何解決上述問題

增加過濾器

@WebFilter
@Component
public class CorsFilter implements Filter {
 @Override
 public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
  HttpServletRequest request = (HttpServletRequest) req;
  HttpServletResponse response = (HttpServletResponse) res;
  response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
  response.setHeader("Access-Control-Allow-Credentials", "true");
  response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
  response.setHeader("Access-Control-Max-Age", "3600");
  response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
  System.out.println("**************************跨域過濾器被使用**************************");
  chain.doFilter(req, res);
 }
}

注意Access-Control-Allow-Origin這個屬性不要用 * ，因?yàn)橛?* 的話是可以解決跨域問題，但是無法解決登陸失效的問題。

axios屬性設(shè)置

在Vue中使用axios來發(fā)送請求，我們增加如下設(shè)置

axios.defaults.withCredentials = true;

如果沒有配置為true，默認(rèn)為false則向后臺發(fā)送的請求當(dāng)中不攜帶cookie信息，如此每一次sessionID自然會不同。因此獲取不到登陸信息。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

詳解springboot和vue前后端分離開發(fā)跨域登陸問題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽