Cookie跨域問題的解決

問題描述

前後端完全分離的項目，前端使用Vue + axios，後端使用SpringBoot。
使用CORS協議解決跨域訪問數據限制的問題，但是發現客戶端的Axios請求不會自動帶上服務器返回的Cookie：JSESSIONID。
導致每一個Axios請求在服務端看來都是一個新的請求，都會在服務端創建新的Session（在響應消息頭中設置Set-Cookie：JSESSIONID=xxx）。

分析原因

實際上，這是瀏覽器的同源策略導致的問題：不允許JS訪問跨域的Cookie。

解決方案

需要從兩方面進行解決問題

• 在配置中允許跨域請求Cookie

package com.xyl.Common;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * @author xianyanglin
 * @title: CORSConfiguration
 * @projectName login
 * @description: 跨域配置
 * @date 2019/6/22 002223:02
 */
@Configuration
public class CORSConfiguration extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(false).maxAge(3600)
                .exposedHeaders("access-control-allow-headers",
                        "access-control-allow-methods",
                        "access-control-allow-origin",
                        "access-control-max-age",
                        "X-Frame-Options")
                //設置允許跨域請求的域名
                .allowedOrigins("*")
                //是否允許證書 不再默認開啓
                .allowCredentials(true)
                //設置允許的方法
                .allowedMethods("*")
                //跨域允許時間
                .maxAge(3600);

    }
}

• 2.客戶端需要設置Ajax請求屬性withCredentials=true，讓Ajax請求都帶上Cookie。在main.js中設置

axios.defaults.withCredentials = true