java跨域cookie失效問題及解決

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

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

1. 現(xiàn)象描述

1.1 問題背景

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

在這種架構下，前端和后端可能會部署在不同的域名或端口上，這就引發(fā)了跨域請求的問題?？缬蛘埱笊婕暗綖g覽器的同源策略，尤其是當涉及到 Cookie 時，問題會變得更加復雜。

1.2 具體現(xiàn)象

當前端應用嘗試向后端 API 發(fā)送請求并期望后端返回的 Cookie 能夠在前端被正常使用時，可能會遇到以下問題：

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

1.3 常見提示信息

在這種情況下，前端開發(fā)者可能會在控制臺或網絡請求面板中看到以下提示信息：

HTTP 狀態(tài)碼 400：請求被拒絕，通常是因為缺少必要的認證信息（如 Cookie）。

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

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 丟失：在網絡請求面板中查看響應頭部時，可能會發(fā)現(xiàn) Set-Cookie 頭部存在，但瀏覽器并未將其存儲。

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

2. 跨域 Cookie 的原理

2.1 什么是 Cookie

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

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

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

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

2.2 Cookie 的作用域

Cookie 的作用域定義了它們在何種情況下會被發(fā)送到服務器。主要包括以下幾方面：

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

2.3 SameSite 屬性

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

Strict：完全禁止跨站請求發(fā)送 Cookie。只有在與 Cookie 所屬站點完全一致的請求中才會發(fā)送 Cookie。
Lax：在跨站請求中，只有導航到目標站點的 GET 請求會發(fā)送 Cookie。這是一個平衡安全性和可用性的選項。
None：允許跨站請求發(fā)送 Cookie，但必須同時設置 Secure 屬性。這種情況下，Cookie 可以在所有跨站請求中發(fā)送。

在實際應用中，如果 SameSite 屬性設置不當，可能會導致跨域請求中的 Cookie 失效，從而影響用戶的會話管理和狀態(tài)保持。

3. 解決方案

3.1 Java 后端解決方案

3.1.1 配置 SameSite 屬性

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

Strict：Cookie 僅在同一站點請求中發(fā)送。
Lax：Cookie 在同一站點請求和部分跨站請求（如 GET 請求）中發(fā)送。
None：Cookie 在所有跨站請求中發(fā)送，但必須同時設置 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 設置 Cookie 屬性

在 Spring Boot 中，可以通過配置類來設置 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 解決跨域問題

在 Spring Boot 中，可以通過配置 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 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 配置跨域請求

在 Vue 項目中，可以通過配置 vue.config.js 文件來設置代理，以解決開發(fā)環(huán)境中的跨域問題。

示例代碼：

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

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

在 Vue 項目中，通常使用 Axios 來發(fā)送 HTTP 請求。可以全局配置 Axios 以支持跨域請求。

示例代碼：

import axios from 'axios';

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

export default axios;

3.2.3 設置 withCredentials 屬性

在發(fā)送具體請求時，也可以單獨設置 withCredentials 屬性。

示例代碼：

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

3.3 Nginx 解決方案

3.3.1 配置 Nginx 處理跨域

在 Nginx 配置文件中，可以通過設置響應頭來允許跨域請求。

示例代碼：

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 設置 Cookie 屬性

在 Nginx 中，可以通過 proxy_cookie_path 指令來設置 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 存儲數據

window.localStorage 是一種在瀏覽器中存儲數據的機制，它具有以下優(yōu)點：

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

3.4.1 代碼示例：存儲數據

在需要存儲數據的頁面中，我們可以使用 window.localStorage.setItem 方法將數據存儲到 localStorage 中。假設我們有一個 JSON 對象 jsonData，需要將其中的 redirectData 存儲起來。

// 假設 jsonData 是我們需要存儲的數據對象
const jsonData = {
    redirectData: "exampleData"
};

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

// 驗證數據是否存儲成功
console.log('Data stored in localStorage:', window.localStorage.getItem('redirectData'));

3.4.2 代碼示例：獲取數據

在目標頁面中，我們可以使用 window.localStorage.getItem 方法從 localStorage 中讀取數據。

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

// 檢查數據是否存在
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 失效問題的工作原理如下：

數據存儲：

在需要傳遞數據的頁面中，使用 window.localStorage.setItem 方法將數據存儲到 localStorage 中。localStorage 是基于域名（origin）的存儲機制，因此存儲的數據在同一域名下的所有頁面中都是可訪問的。

數據獲取：

在目標頁面中，使用 window.localStorage.getItem 方法從 localStorage 中讀取數據。由于 localStorage 是持久化存儲，數據在瀏覽器關閉后仍然存在，直到被顯式刪除。

數據傳遞：

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

3.4.4 使用場景與限制

使用場景

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

限制

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

4. 實踐案例

4.1 Java 后端代碼示例

在 Java 后端中，我們可以使用 Spring Boot 來設置 Cookie 屬性和處理跨域請求。以下是一個簡單的示例：

設置 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 應用中，可以通過配置類來全局配置 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 項目中，我們通常使用 Axios 進行 HTTP 請求。以下是一個示例，展示如何配置 Axios 以支持跨域請求并攜帶 Cookie：

安裝 Axios

npm install axios

配置 Axios

在 Vue 項目的 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ā)送跨域請求

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

<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)調

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

后端代碼

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>

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

5. 常見問題與排查

5.1 Cookie 未正確設置

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

排查步驟：

確認 Cookie 的 SameSite 屬性設置為 None 并且 Secure 屬性設置為 true。
檢查 Cookie 的路徑和域是否正確。
確認服務器響應頭中包含 Set-Cookie 字段。

5.2 瀏覽器限制

問題描述：某些瀏覽器可能對跨域 Cookie 有額外的限制。

排查步驟：

確認瀏覽器版本是否支持 SameSite=None。
檢查瀏覽器的隱私設置，確保沒有阻止第三方 Cookie。
使用瀏覽器開發(fā)者工具查看網絡請求和響應，確認 Cookie 是否被正確設置和發(fā)送。

5.3 服務器配置問題

問題描述：服務器配置錯誤導致跨域請求失敗。

排查步驟：

確認服務器的 CORS 配置正確，允許所需的跨域請求。
檢查服務器日志，確認沒有其他錯誤影響跨域請求。
確認服務器響應頭中包含正確的 CORS 頭部信息。

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Mybatis-Plus使用@TableField實現(xiàn)自動填充日期的代碼示例
數據庫中經常有create_time,update_time兩個字段,在代碼中設置時間有點太麻煩了?mybatis-plus可以幫我們自動填充，本文主要介紹了Mybatis-Plus使用@TableField實現(xiàn)自動填充日期的代碼示例，感興趣的可以了解一下
2022-04-04
java 交換兩個數據的方法實例詳解
這篇文章主要介紹了java 交換兩個數據的方法實例詳解的相關資料,需要的朋友可以參考下
2016-12-12
SpringCloud之熔斷器Hystrix的實現(xiàn)
這篇文章主要介紹了SpringCloud之熔斷器Hystrix的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08
Spring MVC+FastJson+hibernate-validator整合的完整實例教程
這篇文章主要給大家介紹了關于Spring MVC+FastJson+hibernate-validator整合的完整實例教程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2018-04-04
springboot webflux 過濾器(使用RouterFunction實現(xiàn))
這篇文章主要介紹了springboot webflux 過濾器(使用RouterFunction實現(xiàn))，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
五分鐘手擼一個Spring容器(萌芽版)
Spring的兩大內核分別是IOC和AOP，其中最最核心的是IOC。這篇文章主要介紹了五分鐘，手擼一個Spring容器的相關知識,需要的朋友可以參考下
2022-03-03
Mysql?json類型字段Java+Mybatis數據字典功能的實踐方式
這篇文章主要介紹了Mysql?json類型字段Java+Mybatis數據字典功能的實踐方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
JAVA基本類型包裝類 BigDecimal BigInteger 的使用
Java 中預定義了八種基本數據類型，包括：byte，int，long，double，float，boolean，char，short，接下來文章小編將向大家介紹其中幾個類型的內容,需要的朋友可以參考下文章
2021-09-09
springboot整合rabbitmq的示例代碼
本篇文章主要介紹了springboot整合rabbitmq的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
IDEA如何切換JDK版本
本文主要介紹了IDEA如何切換JDK版本,JDK版本之間的關系是一個向后兼容的關系,所以我們需要切換JDK的版本號,具有一定的參考價值,感興趣的可以了解一下
2024-01-01