同源策略

同源策略限制了當前頁面的請求只能在當前域下訪問，只要協議、ip、端口有一個不一樣，就會觸發同源策略，例如當前域是http://192.168.1.73:8080,而請求的域是http://192.168.1.73:8081這樣就造成跨域了，此外，跨域并不是瀏覽器沒有請求到服務器，而是服務器已經將結果返回了，但是由于響應頭中缺少相應的頭信息，導致前端獲取響應結果失敗。

• 跨域的分類：

DOM 同源策略：禁止對不同源頁面 DOM 進行操作。這里主要場景是 iframe 跨域的情況，不同域名的 iframe 是限制互相訪問的。

XMLHttpRequest 同源策略：禁止使用 XHR 對象向不同源的服務器地址發起 HTTP 請求。

相信第二種情況在做前后端分離開發時會經常用到，無論是jquery還是axios最終都是用的瀏覽器的XMLHttpRequest對象發送異步請求，瀏覽器對XMLHttpRequest請求做了跨域限制，但是對于那種瀏覽器窗口會直接刷新的不會有跨域，例如地址欄直接GET請求、表單跳轉、超鏈接、window.location.href等，這些請求都會直接刷新瀏覽器窗口，類似這種請求不會發生跨域。

• 跨域解決方案

前端解決方案：在開發環境下，可配置代理，相當于vue啟動了一個服務器，ajax請求都訪問同源的代理服務器，而不是由瀏覽器直接訪問后臺服務器，這樣瀏覽器就不會做同源限制，因為訪問的是同一個源，而服務器與服務器之間不會有跨域問題，將來在開發完成部署的時候，可以部署到nginx上，也可以解決跨域。
在項目的根目錄下新建一個 vue.config.js,并設置

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({transpileDependencies: true,devServer: {proxy: {"/api/cap":{"target":"http://10.99.160.11:8500/","secure": true, // 接受運行在https上，默認不接受"changeOrigin": true, // 如果設置為true,那么本地會虛擬一個服務器接收你的請求并代你發送該請求，這樣就不會有跨域問題（只適合開發環境）"pathRewrite": { //重寫路徑 比如'/apis/aaa/ccc'重寫為'/aaa/ccc''^/api/cap': 'sysuser/captcha?uuid=b664ea8a-b71d-4f9c-8cba-bf38c5e95f60&timestamp=1661923225561'}},"/api": { // 代理接口前綴為/apis的請求"target": 'http://10.99.160.11:8080/', // 對應的代理地址"secure": true, // 接受運行在https上，默認不接受"changeOrigin": true, // 如果設置為true,那么本地會虛擬一個服務器接收你的請求并代你發送該請求，這樣就不會有跨域問題（只適合開發環境）"pathRewrite": { //重寫路徑 比如'/apis/aaa/ccc'重寫為'/aaa/ccc''^/api': ''}},}} })

后端解決跨域問題，上面說了，跨域是由于響應頭中確實一些頭信息，那么可使用過濾器在每次響應前添加頭信息。

@Configuration public class CorsConfig {@Beanpublic CorsFilter corsFilter() {//1. 添加 CORS配置信息CorsConfiguration config = new CorsConfiguration();//放行哪些原始域config.addAllowedOriginPattern("*");//是否發送 Cookieconfig.setAllowCredentials(true);//放行哪些請求方式config.addAllowedMethod("*");//放行哪些原始請求頭部信息config.addAllowedHeader("*");//暴露哪些頭部信息config.addExposedHeader(HttpHeaders.ACCEPT);//2. 添加映射路徑UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();corsConfigurationSource.registerCorsConfiguration("/**",config);//3. 返回新的CorsFilterreturn new CorsFilter(corsConfigurationSource);}}

cookie接收問題

ajax請求的響應中攜帶的cookie是否會被存儲？

如果是同域名端口的ajax請求，響應中的cookie會被存儲，但是如果是非同域名或端口的cookie，瀏覽器會限制。

cookie的samesite屬性在chrome瀏覽器中默認是LAX，chrome瀏覽器為了安全性，不會保留。可通過chrome插件調整。

除此之外，如果服務器響應的cookie是其他域名也會直接被瀏覽器丟棄。

cookie的默認domain以及作用域？

cookie也有同源策略，只不過不區分端口，IP相同的其他端口也可以攜帶cookie。

cookie的作用域名默認是當前請求域名或者當前請求域名的子域名。

cookie的各個屬性的作用

詳細見：cookie的所有屬性介紹

跨域請求如何攜帶cookie？== （驗證無效）

此時需要設置ajax的屬性withCredentials: true, 后端也需要在請求頭中設置 withCredentials: true

前端段分離下cookie如何使用？

此時需要設置ajax的屬性withCredentials: true, 后端也需要在請求頭中設置 withCredentials: true

有代理服務器下的cookie?

使用代理服務器時前端可以正常保存服務器返回的cookie。

sso單點登錄時cookie的使用？

單點登錄模式，如果是前后端分離，則暴露前端地址，檢測跳轉的前端地址中有沒有指定的token，如果有則存儲token并放行，如果沒有，則校驗cookie或sessionStorage中有沒有，有則放行，沒有則重定向到sso統一登錄頁面進行登錄，并且傳遞服務器的地址，登錄成功后跳轉至服務器，服務器校驗后重新重定向到前端地址，如果直接訪問服務器地址，則還是校驗有沒有攜帶token，如果有，繼續校驗，沒有檢測請求頭或者cookie，都沒有則重定向到sso統一登錄頁面。

總結

以上是生活随笔為你收集整理的Cookie跨域存储问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。