同源策略

同源策略限制了當(dāng)前頁(yè)面的請(qǐng)求只能在當(dāng)前域下訪問(wèn)，只要協(xié)議、ip、端口有一個(gè)不一樣，就會(huì)觸發(fā)同源策略，例如當(dāng)前域是http://192.168.1.73:8080,而請(qǐng)求的域是http://192.168.1.73:8081這樣就造成跨域了，此外，跨域并不是瀏覽器沒(méi)有請(qǐng)求到服務(wù)器，而是服務(wù)器已經(jīng)將結(jié)果返回了，但是由于響應(yīng)頭中缺少相應(yīng)的頭信息，導(dǎo)致前端獲取響應(yīng)結(jié)果失敗。

• 跨域的分類(lèi)：

DOM 同源策略：禁止對(duì)不同源頁(yè)面 DOM 進(jìn)行操作。這里主要場(chǎng)景是 iframe 跨域的情況，不同域名的 iframe 是限制互相訪問(wèn)的。

XMLHttpRequest 同源策略：禁止使用 XHR 對(duì)象向不同源的服務(wù)器地址發(fā)起 HTTP 請(qǐng)求。

相信第二種情況在做前后端分離開(kāi)發(fā)時(shí)會(huì)經(jīng)常用到，無(wú)論是jquery還是axios最終都是用的瀏覽器的XMLHttpRequest對(duì)象發(fā)送異步請(qǐng)求，瀏覽器對(duì)XMLHttpRequest請(qǐng)求做了跨域限制，但是對(duì)于那種瀏覽器窗口會(huì)直接刷新的不會(huì)有跨域，例如地址欄直接GET請(qǐng)求、表單跳轉(zhuǎn)、超鏈接、window.location.href等，這些請(qǐng)求都會(huì)直接刷新瀏覽器窗口，類(lèi)似這種請(qǐng)求不會(huì)發(fā)生跨域。

• 跨域解決方案

前端解決方案：在開(kāi)發(fā)環(huán)境下，可配置代理，相當(dāng)于vue啟動(dòng)了一個(gè)服務(wù)器，ajax請(qǐng)求都訪問(wèn)同源的代理服務(wù)器，而不是由瀏覽器直接訪問(wèn)后臺(tái)服務(wù)器，這樣瀏覽器就不會(huì)做同源限制，因?yàn)樵L問(wèn)的是同一個(gè)源，而服務(wù)器與服務(wù)器之間不會(huì)有跨域問(wèn)題，將來(lái)在開(kāi)發(fā)完成部署的時(shí)候，可以部署到nginx上，也可以解決跨域。
在項(xiàng)目的根目錄下新建一個(gè) vue.config.js,并設(shè)置

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

后端解決跨域問(wèn)題，上面說(shuō)了，跨域是由于響應(yīng)頭中確實(shí)一些頭信息，那么可使用過(guò)濾器在每次響應(yīng)前添加頭信息。

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

cookie接收問(wèn)題

ajax請(qǐng)求的響應(yīng)中攜帶的cookie是否會(huì)被存儲(chǔ)？

如果是同域名端口的ajax請(qǐng)求，響應(yīng)中的cookie會(huì)被存儲(chǔ)，但是如果是非同域名或端口的cookie，瀏覽器會(huì)限制。

cookie的samesite屬性在chrome瀏覽器中默認(rèn)是LAX，chrome瀏覽器為了安全性，不會(huì)保留。可通過(guò)chrome插件調(diào)整。

除此之外，如果服務(wù)器響應(yīng)的cookie是其他域名也會(huì)直接被瀏覽器丟棄。

cookie的默認(rèn)domain以及作用域？

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

cookie的作用域名默認(rèn)是當(dāng)前請(qǐng)求域名或者當(dāng)前請(qǐng)求域名的子域名。

cookie的各個(gè)屬性的作用

詳細(xì)見(jiàn)：cookie的所有屬性介紹

跨域請(qǐng)求如何攜帶cookie？== （驗(yàn)證無(wú)效）

此時(shí)需要設(shè)置ajax的屬性withCredentials: true, 后端也需要在請(qǐng)求頭中設(shè)置 withCredentials: true

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

此時(shí)需要設(shè)置ajax的屬性withCredentials: true, 后端也需要在請(qǐng)求頭中設(shè)置 withCredentials: true

有代理服務(wù)器下的cookie?

使用代理服務(wù)器時(shí)前端可以正常保存服務(wù)器返回的cookie。

sso單點(diǎn)登錄時(shí)cookie的使用？

單點(diǎn)登錄模式，如果是前后端分離，則暴露前端地址，檢測(cè)跳轉(zhuǎn)的前端地址中有沒(méi)有指定的token，如果有則存儲(chǔ)token并放行，如果沒(méi)有，則校驗(yàn)cookie或sessionStorage中有沒(méi)有，有則放行，沒(méi)有則重定向到sso統(tǒng)一登錄頁(yè)面進(jìn)行登錄，并且傳遞服務(wù)器的地址，登錄成功后跳轉(zhuǎn)至服務(wù)器，服務(wù)器校驗(yàn)后重新重定向到前端地址，如果直接訪問(wèn)服務(wù)器地址，則還是校驗(yàn)有沒(méi)有攜帶token，如果有，繼續(xù)校驗(yàn)，沒(méi)有檢測(cè)請(qǐng)求頭或者cookie，都沒(méi)有則重定向到sso統(tǒng)一登錄頁(yè)面。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。