java跨域cookie失效問(wèn)題及解決

更新時(shí)間：2025年01月11日 10:16:32 作者：CC大煊

文章介紹了現(xiàn)代Web應(yīng)用中前后端分離架構(gòu)下跨域請(qǐng)求和Cookie處理的問(wèn)題,包括現(xiàn)象描述、跨域Cookie的原理、解決方案（如Java后端、前端Vue、Nginx配置,以及使用window.localStorage存儲(chǔ)數(shù)據(jù)）,以及實(shí)踐案例和常見(jiàn)問(wèn)題排查

1. 現(xiàn)象描述

1.1 問(wèn)題背景

在現(xiàn)代 Web 應(yīng)用中，前后端分離架構(gòu)已經(jīng)成為一種常見(jiàn)的開(kāi)發(fā)模式。前端通常使用 Vue.js 等框架，而后端則使用 Java 等語(yǔ)言構(gòu)建 API 服務(wù)。

在這種架構(gòu)下，前端和后端可能會(huì)部署在不同的域名或端口上，這就引發(fā)了跨域請(qǐng)求的問(wèn)題。跨域請(qǐng)求涉及到瀏覽器的同源策略，尤其是當(dāng)涉及到 Cookie 時(shí)，問(wèn)題會(huì)變得更加復(fù)雜。

1.2 具體現(xiàn)象

當(dāng)前端應(yīng)用嘗試向后端 API 發(fā)送請(qǐng)求并期望后端返回的 Cookie 能夠在前端被正常使用時(shí)，可能會(huì)遇到以下問(wèn)題：

前端發(fā)送請(qǐng)求后，后端正常處理并返回響應(yīng)，其中包含 Set-Cookie 頭部。
瀏覽器接收到響應(yīng)，但由于跨域問(wèn)題，Set-Cookie 頭部被忽略，導(dǎo)致 Cookie 未能正確設(shè)置。
后續(xù)請(qǐng)求由于缺少必要的 Cookie，導(dǎo)致用戶(hù)會(huì)話無(wú)法維持或認(rèn)證失敗。

1.3 常見(jiàn)提示信息

在這種情況下，前端開(kāi)發(fā)者可能會(huì)在控制臺(tái)或網(wǎng)絡(luò)請(qǐng)求面板中看到以下提示信息：

HTTP 狀態(tài)碼 400：請(qǐng)求被拒絕，通常是因?yàn)槿鄙俦匾恼J(rèn)證信息（如 Cookie）。

CORS 錯(cuò)誤：瀏覽器控制臺(tái)中可能會(huì)出現(xiàn)跨域資源共享（CORS）相關(guān)的錯(cuò)誤信息，例如：

Access to XMLHttpRequest at 'https://api.example.com/resource' from origin 'https://frontend.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Cookie 丟失：在網(wǎng)絡(luò)請(qǐng)求面板中查看響應(yīng)頭部時(shí)，可能會(huì)發(fā)現(xiàn) Set-Cookie 頭部存在，但瀏覽器并未將其存儲(chǔ)。

這些現(xiàn)象表明，盡管后端服務(wù)正常響應(yīng)，但由于跨域問(wèn)題，前端未能正確接收到或存儲(chǔ) Cookie，導(dǎo)致后續(xù)請(qǐng)求失敗。

2. 跨域 Cookie 的原理

2.1 什么是 Cookie

Cookie 是一種由服務(wù)器發(fā)送并存儲(chǔ)在客戶(hù)端的小型數(shù)據(jù)文件，用于保存用戶(hù)的狀態(tài)信息。它們通常用于以下幾種用途：

會(huì)話管理：如用戶(hù)登錄狀態(tài)、購(gòu)物車(chē)內(nèi)容等。
個(gè)性化設(shè)置：如用戶(hù)偏好設(shè)置、主題選擇等。
跟蹤：用于分析用戶(hù)行為和廣告投放。

Cookie 由鍵值對(duì)組成，通常包含以下屬性：

name：Cookie 的名稱(chēng)。
value：Cookie 的值。
domain：Cookie 所屬的域。
path：Cookie 的有效路徑。
expires/max-age：Cookie 的有效期。
secure：指示 Cookie 只能通過(guò) HTTPS 傳輸。
HttpOnly：指示 Cookie 不能通過(guò) JavaScript 訪問(wèn)。
SameSite：限制跨站請(qǐng)求時(shí) Cookie 的發(fā)送。

2.2 Cookie 的作用域

Cookie 的作用域定義了它們?cè)诤畏N情況下會(huì)被發(fā)送到服務(wù)器。主要包括以下幾方面：

域（Domain）：Cookie 只會(huì)在其所屬域及子域內(nèi)發(fā)送。例如，設(shè)置為 example.com 的 Cookie 會(huì)在 sub.example.com 也有效。
路徑（Path）：Cookie 只會(huì)在指定路徑及其子路徑內(nèi)發(fā)送。例如，路徑為 /app 的 Cookie 只會(huì)在 /app 和 /app/* 下有效。
安全性（Secure）：標(biāo)記為 Secure 的 Cookie 只會(huì)在 HTTPS 連接中發(fā)送。
HttpOnly：標(biāo)記為 HttpOnly 的 Cookie 不能通過(guò) JavaScript 訪問(wèn)，增加了安全性。

2.3 SameSite 屬性

SameSite 屬性用于防止跨站請(qǐng)求偽造（CSRF）攻擊，控制 Cookie 在跨站請(qǐng)求中的發(fā)送行為。該屬性有三個(gè)值：

Strict：完全禁止跨站請(qǐng)求發(fā)送 Cookie。只有在與 Cookie 所屬站點(diǎn)完全一致的請(qǐng)求中才會(huì)發(fā)送 Cookie。
Lax：在跨站請(qǐng)求中，只有導(dǎo)航到目標(biāo)站點(diǎn)的 GET 請(qǐng)求會(huì)發(fā)送 Cookie。這是一個(gè)平衡安全性和可用性的選項(xiàng)。
None：允許跨站請(qǐng)求發(fā)送 Cookie，但必須同時(shí)設(shè)置 Secure 屬性。這種情況下，Cookie 可以在所有跨站請(qǐng)求中發(fā)送。

在實(shí)際應(yīng)用中，如果 SameSite 屬性設(shè)置不當(dāng)，可能會(huì)導(dǎo)致跨域請(qǐng)求中的 Cookie 失效，從而影響用戶(hù)的會(huì)話管理和狀態(tài)保持。

3. 解決方案

3.1 Java 后端解決方案

3.1.1 配置 SameSite 屬性

為了確保 Cookie 能在跨域請(qǐng)求中被正確發(fā)送和接收，可以配置 Cookie 的 SameSite 屬性。SameSite 屬性有三個(gè)值：

Strict：Cookie 僅在同一站點(diǎn)請(qǐng)求中發(fā)送。
Lax：Cookie 在同一站點(diǎn)請(qǐng)求和部分跨站請(qǐng)求（如 GET 請(qǐng)求）中發(fā)送。
None：Cookie 在所有跨站請(qǐng)求中發(fā)送，但必須同時(shí)設(shè)置 Secure 屬性。

示例代碼：

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;

public void setCookie(HttpServletResponse response) {
    Cookie cookie = new Cookie("key", "value");
    cookie.setPath("/");
    cookie.setHttpOnly(true);
    cookie.setSecure(true);
    cookie.setMaxAge(7 * 24 * 60 * 60); // 1 week
    cookie.setSameSite("None"); // SameSite=None
    response.addCookie(cookie);
}

3.1.2 使用 Spring Boot 設(shè)置 Cookie 屬性

在 Spring Boot 中，可以通過(guò)配置類(lèi)來(lái)設(shè)置 Cookie 屬性。

示例代碼：

import org.springframework.boot.web.server.Cookie.SameSite;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class CookieConfig {

    @Bean
    public ServletWebServerFactory servletWebServerFactory() {
        TomcatServletWebServerFactory factory = new TomcatServletWebServerFactory();
        factory.addContextCustomizers(context -> {
            context.setSessionCookieConfig(sessionCookieConfig -> {
                sessionCookieConfig.setSameSite(SameSite.NONE.attributeValue());
                sessionCookieConfig.setSecure(true);
            });
        });
        return factory;
    }
}

3.1.3 配置 CORS 解決跨域問(wèn)題

在 Spring Boot 中，可以通過(guò)配置 CORS 來(lái)允許跨域請(qǐng)求。

示例代碼：

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

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://your-frontend-domain.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true)
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

3.2 前端解決方案

3.2.1 Vue 配置跨域請(qǐng)求

在 Vue 項(xiàng)目中，可以通過(guò)配置 vue.config.js 文件來(lái)設(shè)置代理，以解決開(kāi)發(fā)環(huán)境中的跨域問(wèn)題。

示例代碼：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-backend-domain.com',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

3.2.2 使用 Axios 發(fā)送跨域請(qǐng)求

在 Vue 項(xiàng)目中，通常使用 Axios 來(lái)發(fā)送 HTTP 請(qǐng)求?？梢匀峙渲?Axios 以支持跨域請(qǐng)求。

示例代碼：

import axios from 'axios';

axios.defaults.baseURL = 'http://your-backend-domain.com';
axios.defaults.withCredentials = true; // 允許攜帶 Cookie

export default axios;

3.2.3 設(shè)置 withCredentials 屬性

在發(fā)送具體請(qǐng)求時(shí)，也可以單獨(dú)設(shè)置 withCredentials 屬性。

示例代碼：

axios.get('/api/some-endpoint', {
  withCredentials: true
}).then(response => {
  console.log(response.data);
});

3.3 Nginx 解決方案

3.3.1 配置 Nginx 處理跨域

在 Nginx 配置文件中，可以通過(guò)設(shè)置響應(yīng)頭來(lái)允許跨域請(qǐng)求。

示例代碼：

server {
    listen 80;
    server_name your-backend-domain.com;

    location / {
        add_header 'Access-Control-Allow-Origin' 'http://your-frontend-domain.com';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';

        if ($request_method = 'OPTIONS') {
            return 204;
        }

        proxy_pass http://backend_server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

3.3.2 設(shè)置 Cookie 屬性

在 Nginx 中，可以通過(guò) proxy_cookie_path 指令來(lái)設(shè)置 Cookie 的 SameSite 屬性。

示例代碼：

server {
    listen 80;
    server_name your-backend-domain.com;

    location / {
        proxy_pass http://backend_server;
        proxy_cookie_path / "/; SameSite=None; Secure";
    }
}

3.4 使用 window.localStorage 存儲(chǔ)數(shù)據(jù)

window.localStorage 是一種在瀏覽器中存儲(chǔ)數(shù)據(jù)的機(jī)制，它具有以下優(yōu)點(diǎn)：

持久性：數(shù)據(jù)存儲(chǔ)在瀏覽器中，關(guān)閉瀏覽器后仍然存在，直到被顯式刪除。
容量大：相比于 Cookie 的 4KB 限制，localStorage 的存儲(chǔ)容量通常為 5MB 或更多。
簡(jiǎn)單易用：提供了簡(jiǎn)單的 API 接口，可以方便地存儲(chǔ)和讀取數(shù)據(jù)。

3.4.1 代碼示例：存儲(chǔ)數(shù)據(jù)

在需要存儲(chǔ)數(shù)據(jù)的頁(yè)面中，我們可以使用 window.localStorage.setItem 方法將數(shù)據(jù)存儲(chǔ)到 localStorage 中。假設(shè)我們有一個(gè) JSON 對(duì)象 jsonData，需要將其中的 redirectData 存儲(chǔ)起來(lái)。

// 假設(shè) jsonData 是我們需要存儲(chǔ)的數(shù)據(jù)對(duì)象
const jsonData = {
    redirectData: "exampleData"
};

// 將數(shù)據(jù)存儲(chǔ)到 localStorage 中
window.localStorage.setItem('redirectData', JSON.stringify(jsonData.redirectData));

// 驗(yàn)證數(shù)據(jù)是否存儲(chǔ)成功
console.log('Data stored in localStorage:', window.localStorage.getItem('redirectData'));

3.4.2 代碼示例：獲取數(shù)據(jù)

在目標(biāo)頁(yè)面中，我們可以使用 window.localStorage.getItem 方法從 localStorage 中讀取數(shù)據(jù)。

// 從 localStorage 中獲取數(shù)據(jù)
const storedData = window.localStorage.getItem('redirectData');

// 檢查數(shù)據(jù)是否存在
if (storedData) {
    const redirectData = JSON.parse(storedData);
    console.log('Data retrieved from localStorage:', redirectData);
} else {
    console.log('No data found in localStorage.');
}

3.4.3 解決方案的工作原理

使用 window.localStorage 解決跨域 Cookie 失效問(wèn)題的工作原理如下：

數(shù)據(jù)存儲(chǔ)：

在需要傳遞數(shù)據(jù)的頁(yè)面中，使用 window.localStorage.setItem 方法將數(shù)據(jù)存儲(chǔ)到 localStorage 中。localStorage 是基于域名（origin）的存儲(chǔ)機(jī)制，因此存儲(chǔ)的數(shù)據(jù)在同一域名下的所有頁(yè)面中都是可訪問(wèn)的。

數(shù)據(jù)獲取：

在目標(biāo)頁(yè)面中，使用 window.localStorage.getItem 方法從 localStorage 中讀取數(shù)據(jù)。由于 localStorage 是持久化存儲(chǔ)，數(shù)據(jù)在瀏覽器關(guān)閉后仍然存在，直到被顯式刪除。

數(shù)據(jù)傳遞：

通過(guò)在同一域名下的不同頁(yè)面之間共享 localStorage 數(shù)據(jù)，我們可以實(shí)現(xiàn)跨頁(yè)面的數(shù)據(jù)傳遞，從而解決跨域 Cookie 失效的問(wèn)題。

3.4.4 使用場(chǎng)景與限制

使用場(chǎng)景

單頁(yè)應(yīng)用（SPA）：
在單頁(yè)應(yīng)用中，頁(yè)面切換通常不會(huì)引起頁(yè)面重新加載，因此 localStorage 可以用來(lái)在不同視圖之間共享數(shù)據(jù)。
跨子頁(yè)面的數(shù)據(jù)傳遞：
在同一域名下的不同子頁(yè)面之間傳遞數(shù)據(jù)，例如從一個(gè)登錄頁(yè)面?zhèn)鬟f用戶(hù)信息到主頁(yè)面。
臨時(shí)存儲(chǔ)：
用于臨時(shí)存儲(chǔ)用戶(hù)操作數(shù)據(jù)，例如表單數(shù)據(jù)、用戶(hù)偏好設(shè)置等。

限制

域名限制：
localStorage 只能在同一域名（origin）下的頁(yè)面之間共享數(shù)據(jù)，跨域名（不同 origin）的頁(yè)面無(wú)法直接共享 localStorage 數(shù)據(jù)。
數(shù)據(jù)安全性：
localStorage 中存儲(chǔ)的數(shù)據(jù)是明文的，任何有訪問(wèn)權(quán)限的腳本都可以讀取。因此，不應(yīng)存儲(chǔ)敏感信息，如用戶(hù)密碼、信用卡信息等。
存儲(chǔ)容量限制：
各瀏覽器對(duì) localStorage 的容量限制通常為 5MB，超過(guò)這個(gè)限制的數(shù)據(jù)將無(wú)法存儲(chǔ)。
瀏覽器兼容性：
盡管現(xiàn)代瀏覽器普遍支持 localStorage，但仍需考慮舊版瀏覽器的兼容性問(wèn)題。

4. 實(shí)踐案例

4.1 Java 后端代碼示例

在 Java 后端中，我們可以使用 Spring Boot 來(lái)設(shè)置 Cookie 屬性和處理跨域請(qǐng)求。以下是一個(gè)簡(jiǎn)單的示例：

設(shè)置 SameSite 屬性和跨域配置

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.CrossOrigin;

@RestController
@RequestMapping("/api")
public class CookieController {

    @PostMapping("/set-cookie")
    @CrossOrigin(origins = "https://frontend.example.com", allowCredentials = "true")
    public String setCookie(HttpServletResponse response) {
        Cookie cookie = new Cookie("key", "value");
        cookie.setPath("/");
        cookie.setHttpOnly(true);
        cookie.setSecure(true);
        cookie.setMaxAge(3600); // 1 hour
        cookie.setDomain("example.com");
        cookie.setComment("SameSite=None; Secure"); // For SameSite=None
        response.addCookie(cookie);
        return "Cookie set";
    }
}

配置 CORS

在 Spring Boot 應(yīng)用中，可以通過(guò)配置類(lèi)來(lái)全局配置 CORS：

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

@Configuration
public class WebConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("https://frontend.example.com")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true);
            }
        };
    }
}

4.2 Vue 前端代碼示例

在 Vue 項(xiàng)目中，我們通常使用 Axios 進(jìn)行 HTTP 請(qǐng)求。以下是一個(gè)示例，展示如何配置 Axios 以支持跨域請(qǐng)求并攜帶 Cookie：

安裝 Axios

npm install axios

配置 Axios

在 Vue 項(xiàng)目的 main.js 文件中配置 Axios：

import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';

axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'https://api.example.com';

Vue.prototype.$axios = axios;

new Vue({
  render: h => h(App),
}).$mount('#app');

發(fā)送跨域請(qǐng)求

在 Vue 組件中使用 Axios 發(fā)送請(qǐng)求：

<template>
  <div>
    <button @click="setCookie">Set Cookie</button>
  </div>
</template>

<script>
export default {
  methods: {
    setCookie() {
      this.$axios.post('/api/set-cookie')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

4.3 綜合示例：前后端聯(lián)調(diào)

以下是一個(gè)綜合示例，展示如何在前后端聯(lián)調(diào)中處理跨域 Cookie 問(wèn)題。

后端代碼

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.CrossOrigin;

@RestController
@RequestMapping("/api")
public class CookieController {

    @PostMapping("/set-cookie")
    @CrossOrigin(origins = "https://frontend.example.com", allowCredentials = "true")
    public String setCookie(HttpServletResponse response) {
        Cookie cookie = new Cookie("key", "value");
        cookie.setPath("/");
        cookie.setHttpOnly(true);
        cookie.setSecure(true);
        cookie.setMaxAge(3600); // 1 hour
        cookie.setDomain("example.com");
        cookie.setComment("SameSite=None; Secure"); // For SameSite=None
        response.addCookie(cookie);
        return "Cookie set";
    }
}

前端代碼

<template>
  <div>
    <button @click="setCookie">Set Cookie</button>
  </div>
</template>

<script>
export default {
  methods: {
    setCookie() {
      this.$axios.post('/api/set-cookie')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

<script>
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';

axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'https://api.example.com';

Vue.prototype.$axios = axios;

new Vue({
  render: h => h(App),
}).$mount('#app');
</script>

通過(guò)上述配置，前端發(fā)送請(qǐng)求時(shí)會(huì)攜帶 Cookie，后端也會(huì)正確設(shè)置和返回 Cookie，從而實(shí)現(xiàn)跨域請(qǐng)求中的 Cookie 管理。

5. 常見(jiàn)問(wèn)題與排查

5.1 Cookie 未正確設(shè)置

問(wèn)題描述：Cookie 未被瀏覽器保存或發(fā)送。

排查步驟：

確認(rèn) Cookie 的 SameSite 屬性設(shè)置為 None 并且 Secure 屬性設(shè)置為 true。
檢查 Cookie 的路徑和域是否正確。
確認(rèn)服務(wù)器響應(yīng)頭中包含 Set-Cookie 字段。

5.2 瀏覽器限制

問(wèn)題描述：某些瀏覽器可能對(duì)跨域 Cookie 有額外的限制。

排查步驟：

確認(rèn)瀏覽器版本是否支持 SameSite=None。
檢查瀏覽器的隱私設(shè)置，確保沒(méi)有阻止第三方 Cookie。
使用瀏覽器開(kāi)發(fā)者工具查看網(wǎng)絡(luò)請(qǐng)求和響應(yīng)，確認(rèn) Cookie 是否被正確設(shè)置和發(fā)送。