前端为什么发请求没有携带cookie？-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端为什么发请求没有携带cookie？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、概念

在前端发送请求时，如果想要携带 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'),
        },

             }

请求没带cookie,Vue,JS,前端

2、生产环境

请求没带cookie,Vue,JS,前端

3）解决措施

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

那就只能设置一下逻辑：dev环境，走proxy代理；其他环境，请求接口域名直接是https://os.mingyatest.com/busines-auth-app/ 即可文章来源地址https://www.toymoban.com/news/detail-735013.html

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

到了这里，关于前端为什么发请求没有携带cookie？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！