前后端分离时后端传cookie前端接收不了问题（vite.config.js）

已于 2023-02-18 15:32:07 修改
阅读量1.3k 收藏 2
点赞数
文章标签： 前端 chrome javascript
于 2023-02-18 15:16:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45909571/article/details/129100592
版权

1.问题原因：chrome新版本禁用第三方cookie的SameSite问题：跨域与跨站问题

背景：在登录验证码的时候返回验证码key，从而获取redis中的验证码判断是否正确

2.解决方法：在前端设置代理：代理到我们后端的地址

在如下图中进行配置代理（记住要修改axios的默认请求路径为/api，并且设置axios允许携带cookie） 

1.全局配置允许携带cookie

2.单独配置cookie

 

 3.配置代理

尼古拉斯.鸣
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端vue项目发送请求不携带cookie（vue.config.js和nginx反向代理）
黎小小的博客
01-05 3781
本来发现问题，是因为后台记录到接收到的sessionId一直在变化，导致需要在同一个sessionId下处理的逻辑无法实现。后来才发现前端发的请求都没有带cookie，就是这里，我的之前是不带这个Cookie的。接口文件api.js中设置每次携带cookie。
前后端分离的代码发布系统, 前端vue, 后端go.zip
03-03
在现代Web开发中，"前后端分离"是一种常见的架构模式，它将应用程序的用户界面（前端）与服务器端逻辑（后端）分开，以便各自独立地进行开发、测试和部署。这种模式提高了开发效率，降低了维护成本，并允许前端和...
前后端分离cookie无法传递问题解决方案总结
fhfjfkfff的博客
06-29 3285
前后端分离cookie无法传递问题解决，设置Access-Control-Allow-Origin，Access-Control-Allow-Origin，Access-Control-Allow-Credentials和domain
前后端分离前端请求后端接口的方式
qq_55946937的博客
11-28 966
此外，还可以根据接口要求设置请求头、请求参数等。注意，使用原生 JavaScript 发送请求时需要手动处理状态码、解析数据等操作，如果对此过程不太熟悉，也可以考虑使用第三方库（如 Axios）简化请求过程。可以使用 GET、POST 等 HTTP 方法发送请求，并使用 Promise 对象处理返回的数据。前端可以发送 GraphQL 查询请求到后端，具体请求的数据由前端决定，后端返回对应的结果。库还提供了其他方法和功能，如发送 Mutation 请求、设置请求头等，可以根据需求进行深入学习和使用。
vue本地开发，proxy代理https协议服务时，cookie写入失败解决方法
最新发布
weixin_43865244的博客
05-06 436
总结：本来是很简单的一个问题，通过本地开启HTTPS访问就可以了，但是由于同样的代码在代理正式环境（部署在华为云ECS），set-cookie并没有Secure"属性，在代理公测环境迁移到华为云CCE之后set-cookie就带有Secure属性，导致了排查方向错误。但最终与华为云的老师进行会议沟通后，后端同学和华为云的老师也没有搞清楚了导致这种情况的原因。这个错误表明你的应用程序在使用HTTPS时尝试设置一个带有"Secure"属性的cookie，但是浏览器认为连接不是安全的。
Cookie设置不了及前端不回显问题记录
DevilZXx的博客
03-04 2050
工作上遇到的问题记录
解决跨域问题
xzh_blog
11-07 1149
import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web....
前端页面获取不到后端设置的cookie
wzq1915414095的博客
02-05 2425
这种直接用浏览器打开本地html文件的方式是没办法获取后端设置的cookie的，必须将html部署到web服务器，然后通过url的方式访问才行。原因之一：直接双击html文件用浏览器打开时是获取不到后端设置的cookie的。前端页面获取不到后端设置的cookie。
关于前后端分离的Cookie的事项
发现问题，面对问题，分析问题，解决问题，总结问题
06-11 3929
同源策略主要是由浏览器实施的一种安全机制，用于限制不同源（协议，域名，端口）之间的客户端脚本访问。同源策略确实会限制浏览器中前端应用程序对不同源服务器的访问，但在服务器与服务器之间的通信中，同源策略并不适用。
解决前后端交互 SpringBoot Vue 后端发送的 Cookie 前端无法接收问题！
weixin_46076175的博客
03-05 1409
解决 vue 无法获取后端 Cookie ，axios 请求不携带cookie信息的问题
vue+mock.js实现前后端分离
10-16
【Vue+Mock.js 实现前后端分离】 在现代Web开发中，前后端分离是一种...总之，Vue结合Mock.js 可以在前后端分离的开发模式下，让前端开发者专注于界面逻辑和用户体验，而无需等待后端接口的完成，从而提高开发效率。
vue.config.js中配置Vue的路径别名的方法
10-15
Vue CLI提供了一个名为`vue.config.js`的配置文件，允许我们自定义项目的构建设置，其中包括配置路径别名。以下将详细介绍如何在`vue.config.js`中设置Vue的路径别名。 首先，我们需要在项目的根目录下创建或编辑`...
基于SpringBoot+vue的前后端分离权限管理系统源码+使用说明.zip
03-28
基于SpringBoot+vue的前后端分离权限管理系统源码+使用说明.zip是一个轻量级的，前后端分离的Java快速开发平台，能快速开发项目并交付【接私活利器】 采用SpringBoot、Shiro、MyBatis-Plus、Vue3、TypeScript、...
vite.config.js
09-05
vite.config.js
前后台分离项目，前台拿不到cookie的问题
qq_47657875的博客
03-20 624
而前台的localhost的cookie.get 是拿不到后台的token的。而访问后台时使用的是 127.0.0.1或者Ip，原因是访问前台项目时使用的是localhost，后台返回的cookie的是在访问ip的源上，用localhost打开后台。保证前后台在同一个域上。
vue3+vite+axios，处理跨域cookies问题
weixin_39559449的博客
09-06 5247
方法一：一般vite是可以配置跨域代理的，这个时候就不需要后端配合设置跨域了 在.env.development 文件配置 # vite 本地跨域代理 VITE_PROXY=[["/basic-api","http://localhost:3000"]] # 接口地址 VITE_GLOB_API_URL=/basic-api 由于 /basic-api 匹配到了设置的 VITE_PROXY，所以上方实际是请求 http://localhost:3000/login，这样同时也解决了跨域问题。（3100为项
【已解决】后端设置Cookie后，发现在另外一个方法不能获取
个人学习博客，不足之处，还望不吝赐教！
12-28 1265
用户请求B方法： http://localhost:8090/demo2/cookie_one，但是却得不到cookie中的数据，然后通过调式，发现 request.getCookies()一直为null，这就奇怪了，明明在A方法保存了Cookie，而且也没有涉及跨域等其它问题，为什么cookie会获取不到呢。http://localhost:8090/demo1 或者 http://localhost:8090/demo1/**下的路径时，http://localhost:8090/demo1 域下，
spring boot-静态资源跨域
pursue.dreams的博客
12-11 700
package com.jscz.framework.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfigurati...
前端实现vite.config.js的配置
08-19
在 Vite 中，你可以通过 `vite.config.js` 文件来配置项目的选项。在这个配置文件中，你可以设置诸如代理、构建选项、插件等等。以下是一个简单的 `vite.config.js` 示例： ```javascript module.exports = { // 配置选项 // ... server: { // 代理设置 proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }, build: { // 构建选项 // ... }, plugins: [ // 插件列表 // ... ] }; ``` 在上面的示例中，我们设置了一个简单的代理配置，将以 `/api` 开头的请求代理到 `http://api.example.com`，并且将请求路径中的 `/api` 前缀删除。 除了 `server` 和 `build`，你还可以配置其他选项，例如 `root`、`alias`、`css` 等等。你可以根据你的项目需求自行添加和配置这些选项。 请注意，Vite 的配置文件使用了 CommonJS 的模块导出语法，因此你可以使用 `require` 导入其他模块，并将其作为配置的一部分。 希望这个示例能帮助到你！如果你有任何进一步的问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值