cookie在多域名下的跨域解决办法

author author     2023-03-22     364

关键词:

参考技术A 项目背景
用户登录成功后,服务端生成token,并保存在cookie里。http的cookie机制解决了http请求的无状态,短连接的特性,前端后续的请求都不需要传token或密码,就可以实现权限的认证。
但是方便的同时,跨域和同源的问题随之而来。
不是同源,cookie是不能读写的。(这里的同源是指相同的协议,主机,端口;只要其中任何一项不相等,就不是同源。)(三级域名abc.xx.com 与 二级域名 xx.com 是同源吗?)
下面以几组图来表示:
1、前后端分离的正常访问模式
后端cors配置相应前端的域名,允许跨域访问。后端的域名是meng.abc.com,前端的域名是m.abc.com。因为是同源,cookie读写正常。

2、多个前端域名,访问同一个后端服务的情况
现在增加了两个前端域名,m.51.com, m.xx.com。如下图所示,即使配置跨域的域名,但是也解决不了cookie读写的同源问题!!

3、多个前端域名,分别访问多个后端服务的情况
因为同源的特性,需要针对每个前端域名,分别对应一个后端域名。如下图所示,解决cookie的同源正常读写问题。

备注:这里就不详细讲解跨域的解决方案。上述,只要是前后端分离,都需要配置跨域的cors的二级域名。

spring.domain=abc.com;51.com;xx.com
spring.corsOrigins= http://m.abc.com;https://m.abc.com;http://m.51.com;https://m.51.com;http://m.xx.com;https://m.xx.com

后期可能优化的地方:把token存储在localstorage等地方,通过http header 传递到服务器验证,不要使用http cookie机制,好处既能避开crsf跨站攻击,又能解决同源的跨域问题。

localstorage和cookie的跨域解决方案(代码片段)

...了解,我前面也有文章详细描述过。但是localStorage和cookie的跨域问题,好多小伙伴没有遇到或者不是很清楚,下面这篇文章,我来简单的聊聊!业务场景cookie跨域的业务场景很多,例如:1、百度www域名下面登录了,发现yun域名... 查看详情

常见的跨域方法(九种解决办法)(代码片段)

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:资源跳转:A链接、重定向、表单提交资源嵌入:<link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()... 查看详情

cookie的跨域问题

=>我需要在i.cnblogs.com这里拿到www.cnblogs.com里的cookie。(相同的一级域名下,二级域名不同)。//这个是在www.cnblogs.com里设置的cookieisReload。varcookieName=‘isReload‘;varcookieValue=‘1‘;varmyDate=newDate();myDate.setMonth(myDate.getMo 查看详情

前端常见的跨域解决方案(代码片段)

什么是跨域:一个域名下的文档或者脚本试图请求另外一个域名的下的资源广义的跨域:资源跳转:a链接、重定向、表单提交资源嵌入:<link><script> <img>等dom标签脚本请求:js发起的ajax请求,... 查看详情

在vue-cli@3.x中配置代理解决开发环境的跨域问题的同时解决cookie问题--cookies解决方案(代码片段)

...用了Nginx反代,保证VueJS开发地址和后端接口在同一个域下的方法,可以实现但是相对来说很麻烦。VueCLIProxyVueCLI提供了一个proxy选项,用来代理接口转发流量。我们可以在根目录下新增 查看详情

记一次uwsgi导致的跨域问题

...决问题,遂逐一删除cookie内的测试是否因为某条cookie导致的跨域,最后发现是因为一条键值名为user的cookie导致的跨域,发现user对应的cookie长度为283,更改user值的长度也可以解决跨域问题,最终定位问题原因是因为cookie过长导致... 查看详情

解决项目中的跨域操作问题

浏览器存在许多安全策略,其中同源策略就是其中一个,所谓同源策略也叫同域名策略,即只有协议+域名+端口一致的情况下才可以相互访问,其目的就是为了保护用户信息的安全,同源策略现在的范围包括三方面:1)、Cookie、... 查看详情

前端的跨域问题理解

参考技术A前端真的的是乱的一笔。--来自iOS开发者的一声哀鸣需要把前端看成两部分,一部分是页面,另一部分是接口(或者加数据资源)。前端页面中调接口是有限制的,同源策略(SOP)要求我们调用的接口必须和页面在同一域... 查看详情

vue的跨域设置

...、当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。将target设置为我们需要访问的域名。3、然后在main.js中设置全局属性:1Vue.prototype.HOST=‘/api‘  4、至此,我们就可以在全局使用这个域名... 查看详情

跨域解决办法

我认为的跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域跨域相关的报错: No‘Access-Control-Allow-Origin‘headerispresentontherequestedresource.Origin‘null‘isthereforenotallowedaccess. 解... 查看详情

这次全了,8种超详细web跨域解决方案!

...大家解决跨域问题的参考。一、什么是跨域当a.qq.com域名下的页面或脚本试图去请求b.qq.com域名下的资源时,就是典型的跨域行为。跨域的定义从 查看详情

关于vue-cli的跨域解决

由于Vue-cli服务器是跑在node环境下的8080端口,我们的php代码可能在Apache环境下的7070端口,这个时候就会出现跨域此刻这段php代码在7070端口上如果直接去访问页面报错此刻我们可以不用去后台配置,直接打开vue-cli目录下的config/in... 查看详情

vue-cliproxytable解决开发环境的跨域问题

和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名。今天翻看代码时,突然发... 查看详情

解决vuehttp中的跨域问题

...题,好在vue-cli的脚手架提供了跨域的解决方案,在config下的index.js中有个proxyTable属性,在其中添加如下配置:proxyTable:'/api':target:'http://localhost:8090',changeOrigin:true,pathRewrite:如上所示,如果在8090后在加路径,则无效(亲... 查看详情

ueditor富文本编辑器跨域上传图片解决办法(代码片段)

...,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的跨域,网上查了一下各种花里胡哨,一顿操作猛如虎,比如加document.domain,配置全域名的等等都是然并卵,我仔细研... 查看详情

javascript中的跨域详解(内附源码)

...跨域的问题,这里要说明的是在同一个网站不同的文件夹下的数据交互是不存在跨域问题的。哪些情况下存在跨域问题?主域和子域之间会存在跨域问题(比如www.a.com和www.a.b.com)。不同的域名存在跨域问题,哪怕这两个域名指向... 查看详情

前后端分离下的跨域问题(代码片段)

问题产生的原因  前后端分离项目中,前端和后台服务可能没有部署在一台服务器上。这样的话,前后端ip就会不一致,那么就会产生跨域,往往前后端项目部署的端口通常也可能会不一样,这样也会产生跨域问题。再就是使... 查看详情

第三方 Cookie - 带会话跟踪的跨域 API

】第三方Cookie-带会话跟踪的跨域API【英文标题】:ThirdPartyCookies-CrossDomainAPIsw/SessionTracking【发布时间】:2018-04-0101:58:33【问题描述】:鉴于CORSAPI需要会话cookie来跟踪用户在结帐过程中的移动,因此在多个浏览器中存在问题,即... 查看详情