前端为什么发请求没有携带cookie?

一个被代码耽误的厨子 2024-06-17 10:33:03 阅读 78

一、概念

在前端发送请求时,如果想要携带 cookie,通常只能携带存储在与请求域名相同路径的 cookie。这是由浏览器的同源策略所决定的。

同源策略要求请求的域名、协议和端口都必须一致,否则浏览器会限制跨域请求的权限。当浏览器发送跨域请求时,默认情况下不会自动携带 cookie,只有在以下两种情况下才会携带:

目标域名设置了允许携带 cookie 的响应头(Access-Control-Allow-Credentials),并且请求的 origin 域名也在目标域名的白名单中。

请求通过简单请求(GET、POST、HEAD)发送,并且请求的目标域名与当前页面的域名相同。

因此,如果想要在前端发送跨域请求时携带 cookie,需要确保以上条件被满足,并且在服务器端进行相应的配置。

总结就是:想携带cookie一定不能跨域!

二、案例

1)项目背景

我这个项目在开发环境下是有登录页面的,但是在生产环境上没有,该项目页面最后是通过iframe嵌入到其余项目的,因此在开发环境下登录时,需要走proxy跨域;在生产环境下,不需要

2)问题

首先设置在登录成功后,把后端返回的cookie储存下来

 document.cookie = `auth_token=${res.data.token}`;

1、开发环境

由于在开发环境下的登录接口,采用的是vite.config.ts中配置的proxy跨域,因此我储存的cookie是在我电脑的域下,此时如果我发起请求获取接口,这个接口地址一定要是http://localhost:9021/ 这个域名才可以,也否则是不会携带cookie的

proxy: { '/data-platform-app': { target: 'https://os.baidu.com', changeOrigin: true, rewrite: path => path.replace('^/data-platform-app', 'data-platform-app'), }, }

2、生产环境

 3)解决措施

那问题来了,如果我想在开发环境请求接口的话,由于cookie是储存在本地的域名下,请求接口是不会携带cookie的,这个怎么解决呢?

那就只能设置一下逻辑:dev环境,走proxy代理;其他环境,请求接口域名直接是https://os.mingyatest.com/busines-auth-app/ 即可

'/busines-auth-app':{ target: 'https://os.baidu.com', changeOrigin:true, rewrite:path=>path.replace('/busines-auth-app', '/busines-auth-app') },



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。