CORS跨域携带Cookie
遇到的问题:
某个老系统使用Vue+Axios+PHP开发,本身是部署在同一域名下
这时候不会涉及到跨域问题
但是奈何线上服务器带宽不够用,且JS、CSS、图片等静态资源加载很缓慢
只能把静态资源迁移到阿里云的OSS存储对象里
导致现在出现了跨域,而且无法携带Cookie,因为是老系统,不太可能改成类似JWT的形式
abc.com指向了OSS的静态地址用于打开前端页面
而JS请求的后台接口地址变成了api.com
这时候后台在header头返回了Set-Cookie也没用
因为同源策略,浏览器拒绝写入Cookie
找了网上很多博客说的是用二级域名的形式去做跨域Cookie
但是我这种完全不相同的域名,以上情况对我来说没有用
先贴出伪静态规则
Apache
<IfModule mod_rewrite.c>RewriteEngine onRewriteBase /RewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_FILENAME} !-fRewriteRule ^(.*)$ index.php?s=/$1 [QSA,PT,L]
</IfModule>
Nginx
if (!-d $request_filename){set $rule_0 1$rule_0;
}
if (!-f $request_filename){set $rule_0 2$rule_0;
}
if ($rule_0 = "21"){rewrite ^/(.*)$ /index.php?s=/$1 last;
}
PHP入口函数的地方添加上header(如果支持中间件的框架,可以把该代码略微修改放在中间件里面)
这里值得注意的是
在80内核的Chrome浏览器Access-Control-Allow-Origin必须要指定一个具体的地址,即 http://a.com:8080 这种协议+域名+端口的形式,不能使用*号
header('Access-Control-Allow-Origin:'.$_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Methods:GET,POST,PUT,DELETE,OPTIONS,*');
header('Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding,Cookie');
header('Access-Control-Allow-Credentials:true');
if(strtoupper($_SERVER['REQUEST_METHOD'])=='OPTIONS'){http_response_code(204);exit;
}
前端Axios要设置允许携带Cookie(如果使用JWT令牌的话,可以不用这个)
axios.defaults.withCredentials = true;
此时在火狐浏览器已经能够成功的进行跨域携带Cookie打开系统了
但查了资料,Chrome浏览器内核大于80之后做了调整,需要显式的设置SameSite设置为None
但是我这里试了一下,还是不行,不知道是哪里姿势不对
最终我把abc.com加了个SSL、请求的api.com也加了SSL
在用Chrome浏览器打开(先清缓存,访问要带https)
到这就可以实现前后端分离部署+跨域+Cookie访问接口了
总结一下:
后端要允许跨域,设置header头的时候orgin不能设置为*号
如果能够修改Apache或者Nginx的配置文件也是可以实现跨域的
前端也要设置允许跨域携带Cookie
最后前端和后端的地址都加上SSL,用HTTPS进行访问
以上跨域携带Cookie经过Chrome(版本90)、Firefox、Edge、360极速浏览器测试
CORS跨域携带Cookie相关推荐
- CORS跨域以及Cookie跨域
@CORS跨域以及Cookie跨域 CORS跨域以及Cookie跨域 一.CORS跨域 首先跨域可以理解为指的并不是同一个项目!!! 举例: 本地同时部署两个web项目:web1,web2 域名分别是 ...
- 前端跨域携带cookie
文章目录 前言 一.withCredentials 二.前端axios跨域携带cookie请求示例 三.后端nodejs设置示例 运行结果 总结 前言 在一些场景下,前端需要跨域携带cookie传输给 ...
- 新版本Google浏览器无法跨域携带cookie问题
原因:Chrome升级到80版本之后cookie的SameSite属性默认值由None变为Lax,这也就造成了一些访问跨域cookie无法携带的问题 解决办法 一.低于91版本的Chrome浏览器 请 ...
- 请求跨域设置同时允许cookie跨域(携带cookie)
最近做一个前后端分离的项目,后台.Net 进行开发,使用session来进行身份验证.发现调用接口的时候总是显示未登录,经过检查发现每次请求过去的sessionid是不一样的,导致服务器找不到之前登陆 ...
- axios 跨域携带cookie设置
最近在一个项目中,处理登录,登录是通过session存储用户信息,对于同一个服务器,登录成功之后,对于axios请求不能正确获取session,抓包之后发现是因为请求没有携带原cookie,因此此处记 ...
- Cors跨域(二):实现跨域Cookie共享的三要素
高考不努力,工地里当兄弟 前言 你好,我是YourBatman. 上篇文章(Cors跨域(一):深入理解跨域请求概念及其根因)用超万字的篇幅把Cors几乎所有概念都扫盲了,接下来将逐步提出解决方案等实 ...
- axios跨域携带cookie_axios中cookie跨域及相关配置示例详解
前言 最近在跨域.cookie 以及表单上传这几个方面遇到了点小问题,做个简单探究和总结.本文主要介绍了关于axios中cookie跨域及相关配置的相关内容,下面话不多说了,来一起看看详细的介绍吧. ...
- cors跨域_Nginx通过CORS配置实现跨域访问
什么是跨域 跨域是指跨域名的访问,以下情况都属于跨域: 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同,端口不同 www.jd.com:8080 与 w ...
- CORS——跨域请求那些事儿
[本期嘉宾介绍]睿得,具有多年研发.运维.安全等IT相关从业经历.目前从事CDN.存储.视频直播点播的技术支持.喜爱钻研,喜爱编码,喜爱分享. 在日常的项目开发时会不可避免的需要进行跨域操作,而在实际 ...
最新文章
- Linux内核中的IPSEC实现(7)
- 跟着老王学python
- DL之AlexNet:利用卷积神经网络类AlexNet实现猫狗分类识别(图片数据增强→保存h5模型)
- 并查集的一般操作 ③
- python图像锐化_opencv实现图片模糊和锐化操作
- py3下怎么用StringIO
- Hadoop1.9安装配置
- 《DeepXDE:a deep learning library for solving differential equations》梳理
- java m2文件放哪里_windows下打开.m2文件夹,没有找到setting.xml
- (转载)使用 Anthem.NET 的常见回调(Callback)处理方式小结
- Metasploit Framework(6)客户端渗透(上)
- MFC的运行过程,TheApp对象
- c#迁移文件的时候提示:对路径xxx的访问被拒绝
- EXCEL如何在一个图上画多条曲线
- Facebook受邀者的邮箱地址披露
- Maven环境下测试库和开发库的配置策略以及支持工具
- DPDK — 安装部署
- echarts中如何配置图例形状、图标宽高、图标和文字间距、图例位置、文字颜色、字体大小
- [微信] 微信网页版扫码登录的实现
- uniapp小程序获取手机号、获取用户信息
热门文章
- 大数据解读“彩礼地图”,你是否早已被判“无妻徒刑”?【智库2861】
- Python_介绍_环境搭建_第一个程序_基本语法结构(1)
- SSL 证书无法通过校验问题解决.
- 开发者分享|手写算子没那么难,教你用MindSpore实现自适应平均池化算子!
- 浏览器是什么? (类似socket客户端)
- 前端短路( ||)计算
- NFS,RS宕机问题
- UE4从零搭建CF游戏关卡(蓝图篇)
- 看了三张照片,这个AI只用20分钟破获六年“悬案” 1
- 微信支付缺憾:没有最短操作链优势