解决前后端分离-cookie跨域问题

最新推荐文章于 2025-10-08 06:41:46 发布
原创 最新推荐文章于 2025-10-08 06:41:46 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前后端分离跨域

本文详细介绍了如何在Nginx服务器上配置跨域请求，并在Vue前端项目中设置Axios请求参数，实现前后端分离部署下跨域问题的有效解决。

服务端nginx配置如下：

        location /express-app {
                add_header Access-Control-Allow-Origin $http_origin; //此处不能为*，否则下方的Credentials 不会生效

                add_header Access-Control-Allow-Credentials 'true';
                add_header Access-Control-Allow-Methods 'GET, POST ,OPTIONS';
                add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,Id';
                if ($request_method = 'OPTIONS') {
                        return 204;
                }
                proxy_pass http://127.0.0.1:6001;
                proxy_set_header   X-Forwarded-Proto $scheme;
                proxy_set_header   Host              $http_host;
                proxy_set_header   X-Real-IP         $remote_addr;
                proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
                proxy_set_header Cookie $http_cookie;
        }

前端VUE中配置如下：

// 默认请求地址
Axios.defaults.baseURL = baseURL
// 超时时间
Axios.defaults.timeout = 5000
// 允许携带cookie请求
Axios.defaults.withCredentials = true
// 请求格式及编码
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'

【毕业设计】前后端分离——解决cookies跨域
user_from_future的博客
11-25 1817
前后端分离——解决cookies跨域
前后端分离跨域问题解决方案
qq_53348178的博客
05-29 720
​​/***/@Override// 在这里添加过滤器初始化逻辑（CORS）​@Override// HttpServletResponse是ServletResponse接口的一个实现类，专门用于处理HTTP响应//设置CORS响应头// 允许所有域名访问// 允许的HTTP方法// 预检请求的缓存时间// 允许的请求头​// 如果是预检请求（OPTIONS请求,一般是浏览器自己发送的请求），直接返回成功} else {
解决前后端分离后的Cookie跨域问题
w36680130的博客
08-03 236
解决前后端分离后的Cookie跨域问题
突破浏览器限制：用js-cookie实现跨域请求的Cookie传递
最新发布
gitblog_00038的博客
10-08 1059
你是否曾遇到过这样的困扰：前后端分离项目中，前端页面与API服务器不在同一个域名下，导致Cookie无法正常传递，用户登录状态丢失？别担心，本文将带你一步步解决这个问题，让你轻松掌握跨域Cookie传递的秘诀。读完本文，你将了解跨域Cookie传递的原理，学会使用js-cookie库结合服务器配置实现跨域认证，并掌握常见问题的解决方法。 ## 跨域Cookie传递的挑战与解决方案 在Web开发...
前后端分离使用shiro登录认证cookie跨域问题踩坑
不定时分享最优质的网络技术与教程，满满的干货。
07-09 1198
设置好后，再次请求，你会发现又报了如下错误。你明明设置了cookie，但是就是找不到，请求的时候也带不上，查看Set-Cookie这一行，可以发现有个黄色的叹号，鼠标放到叹号上可以看到chrome给我们的提示，因为SameSite设置的原因，chrome认为这个cookie不应该被跨越携带，所以没有设置，自然也就无法携带cookie。具体解决方式就不写了，可以自己搜索一下。charset=utf-8"的请求，会首先发送一次预检请求，然后再发送正式的post请求，这时，在POST请求时我们可能会有如下错误。
前后端分离Cookie跨域处理
li96666的博客
06-10 158
找到vue里main.js把允许Cookie axios.defaults.withCredentials=true Springboot后端处理新建一个xxx.xxx.xxx.config配置包 @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowCredentials(true) ...
前后端分离架构下的跨域问题
sinat_37138973的博客
05-04 2108
来源： http://mp.weixin.qq.com/s?__biz=MjM5NTM1NDcyOQ==&mid=202557064&idx=1&sn=d24349248e5dd70e0d0bcdc0fb6e6ca5#rd 同源策略与跨域 JSONP方式 反向代理方式 CORS方式 同源策略与跨域 所谓跨域，英文叫做cross-dom...
精选资源
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
01-19
环境： 前端 vue ip地址：192.168.1.205 后端 springboot2.0 ip地址：192.168.1.217 主要开发后端。 问题： ...后续请求取出的用户都为null。 解决过程： ...后台添加过滤器，因为前后端分离，不可能每个方
前后端分离架构跨域问题处理
xiaobai_Qin的博客
06-26 2112
WebMvcConfigure是SpringMVC中⽤来定义Web相关配置的接⼝，通过实现该接⼝，可以配置Web容器中的组 件或资源。例如拦截器、视图控制器、静态资源处理器、视图解析器、跨域配置等等。使⽤WebMvcConfigure接⼝的步骤1）定义⼀个类，实现该接⼝2）添加Configuration注解，使该类成为配置类@Overrideregistry// 配置允许跨域访问的资源，/**表示允许访问所有资源// 配置允许跨域访问的源// 配置允许跨域访问使⽤的请求⽅法。
前后端分离存在跨域问题
weixin_43347737的博客
02-28 2353
前后端分离存在跨域问题跨域二级目录三级目录 跨域 在前后端分离之前，用的都是一个端口号，不存在跨域问题；但是之后前端有一个端口，后端也有一个端口 如：后端8888 前端：8080 二级目录 三级目录 ...
前后端分离跨域与cookie
pscool的博客
03-26 3095
那么，现在再来看下，一个新的问题，刚刚说到cookie在前后端不分离的情况下，cookie默认就是刚刚说的这样玩的，但是如果和跨域问题一起出现的话，又会怎样呢？浏览器它还会携带cookie吗？那么现在就说到这个cookie的问题，它的本质就是一个请求头（Cookie）和响应头（Set-Cookie），只不过这个头会被默认携带给后台。跨域的配置可以看下这个类，里面的解释很清楚，处理逻辑，可以参考DefaultCorsProcessor这个类。
关于前后端分离的Cookie的事项
发现问题，面对问题，分析问题，解决问题，总结问题
06-11 4996
同源策略主要是由浏览器实施的一种安全机制，用于限制不同源（协议，域名，端口）之间的客户端脚本访问。同源策略确实会限制浏览器中前端应用程序对不同源服务器的访问，但在服务器与服务器之间的通信中，同源策略并不适用。
vue + springboot前后端分离跨域cookie
qq_30436011的博客
09-17 2888
问题 前后端分离，请求后端的时候直接请求后端url发现每次请求的sesssionid都不一样，导致缓存数据获取失败 处理 1、前端部分 在vue引入axios的位置添加以下代码 import axios from 'axios' axios.defaults.withCredentials = true;// 允许跨域携带cookie 2、后端过滤器配置允许跨域 response.setHeader("Access-Control-Allow-Origin",request.getHe..
前后端分离，客户端无法获得cookie--解决方法
ITCBL
08-27 2946
前后端分离，客户端无法获得cookie--解决方法 问题：可能很多人在前后端分离开发时，发现抓包工具可以抓到cookie，但是在客户端上cookie的保存位置找不到该cookie。 答：这是ajax本身的问题造成的，解决的办法就是在前端的ajax代码中，添加下面的代码即可： xhrFields:{withCredentials: true}, 具体的添加位置如下面的代码： ajax...
前后端分离的情况下,vue保存cookie时碰到的坑! (axios.defaults.withCredentials = true；) 前方巨坑,请小心!!!
热门推荐
寻觅的博客
08-19 1万+
文章目录一号坑问题描述解决方案二号坑问题描述解决方法总结 一号坑 问题描述 当我们的项目是前后端分离的模式时,vue不会自动帮我们保存后端传来的cookie! 解决方案 我们需要在main中添加axios.defaults.withCredentials = true 二号坑 问题描述 如果你之前处理过跨域方面的问题,应该会记得你曾经在后端请求头添加了一句response['Access-Control-Allow-Origin'] = "*" 我当前用的是django作为后端,如果你是用的是其他的后端
单体项目中前后端分离中的cookie与session
qq_40263927的博客
06-19 717
前端界面效果如下：
前后端分离项目跨域时Cookie方面的问题
weixin_44815852的博客
08-05 1349
前后端分离项目跨域导致的问题 问题背景 先讲一下我的问题背景,最近写完了一个vue+ssm的前后端分离的项目,本地运行完全是没有问题的,然后部署到两个服务器上，一个用Tomcat部署后端提供API，一个用nginx部署前端，问题就产生了: 部分Cookie（准确的说是我提供的Cookie）无法跨域传递 我用Network看了具体情况就是只有向前端网站发送的请求中带有我的cookie（之后直接说成token，我用token做的验证），而发向后端网站的请求全部没有携带token，一开始以为是我的coo
如何解决前后端分离项目的跨域问题？
05-14
<think>嗯，用户之前问了如何实现Spring Boot和Vue的前后端分离，现在又具体问跨域问题的解决方案。我需要结合之前的回答和用户提供的引用内容来整理解决方案。 首先，用户提供的引用[1]到[4]提到了几种跨域解决方法，比如CORS配置、Nginx代理、前端代理等。之前的回答里我提到过后端的CORS配置和前端部署的整合，现在需要更详细地展开这些方法，并补充其他可能的方案。 用户可能想知道不同环境（开发和生产）下的处理方式，以及各种方法的优缺点。比如开发时前端用Vue CLI代理，生产时用Nginx统一域名。引用[2]提到通过同域部署避免跨域，这可能是一个重要的点，需要强调。 还要注意引用中提到的一些过时类，比如WebMvcConfigurerAdapter，现在应该推荐使用WebMvcConfigurer接口，避免继承WebMvcConfigurationSupport导致的问题，这点需要提醒用户。 另外，用户可能对具体配置步骤不太清楚，比如如何在Vue中配置代理，或者在Spring Boot中通过注解或过滤器处理跨域。需要分步骤说明，并提供代码示例，确保用户能跟着操作。 最后，用户可能需要了解不同方案的适用场景，比如小型项目用注解，大型项目用全局配置，或者生产环境用Nginx反向代理。需要总结这些场景，帮助用户选择最合适的方法。 总之，整理出几种主要方案，分开发和生产环境，给出具体步骤和代码，同时指出注意事项和推荐场景，确保回答全面且实用。</think>### Spring Boot + Vue 前后端分离跨域问题解决方案 --- #### 一、跨域问题的本质 前后端分离项目中，**浏览器安全策略（同源策略）** 会阻止不同源（协议/域名/端口任意一项不同）的请求交互。例如： - 前端运行在 `http://localhost:8080`（Vue开发服务器） - 后端运行在 `http://localhost:8081`（Spring Boot服务） --- #### 二、主流解决方案对比 | 方案类型 | 适用场景 | 优缺点 | |-------------------|---------------------------|---------------------------------------| | **后端CORS配置** | 开发/生产环境通用 | 标准化方案，但需后端代码修改 | | **Nginx反向代理** | 生产环境部署 | 零代码侵入，需运维配置 | | **前端代理** | 开发环境调试 | 仅限Vue CLI开发模式使用 | | **Spring Security** | 集成安全框架时 | 需处理权限过滤与跨域优先级问题 | --- #### 三、具体实现方案 ##### 1. 后端CORS全局配置（推荐） **Spring Boot中通过`WebMvcConfigurer`配置**（注意避免使用已废弃的`WebMvcConfigurerAdapter`）： ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8080") // Vue开发地址 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true) // 允许携带Cookie .maxAge(3600); } } ``` **关键点**： - `allowedOrigins`可配置为`"*"`但不推荐（存在安全风险） - `allowCredentials(true)`需与前端`axios`的`withCredentials: true`配合使用[^1] - 若使用Spring Security，需确保跨域配置优先级高于权限过滤[^3] --- ##### 2. 生产环境Nginx反向代理 **通过统一域名消除跨域**（引用[2]方案）： ```nginx server { listen 80; server_name www.javaboy.org; # 前端静态资源 location / { root /opt/frontend/dist; index index.html; try_files $uri $uri/ /index.html; } # 后端API代理 location /api/ { proxy_pass http://backend-server:8081/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` **优势**： - 前端(`www.javaboy.org`)与API(`www.javaboy.org/api/`)同源 - 无需额外跨域配置[^2] --- ##### 3. 开发环境前端代理（Vue CLI） **vue.config.js配置代理**（避免浏览器直接请求后端）： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8081', // Spring Boot地址 changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` **调用示例**： ```javascript axios.get('/api/users') // 实际转发到http://localhost:8081/users ``` --- ##### 4. 注解级局部跨域控制 **在Controller类/方法添加`@CrossOrigin`**： ```java @RestController @CrossOrigin(origins = "http://localhost:8080") // 类级别 @RequestMapping("/api") public class UserController { @CrossOrigin // 方法级别（继承类级别配置） @GetMapping("/users") public List<User> getUsers() { return userService.findAll(); } } ``` --- ##### 5. 过滤器方案（兼容老旧系统） ```java @Bean public FilterRegistrationBean<CorsFilter> corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.addAllowedOrigin("http://localhost:8080"); config.addAllowedMethod("*"); config.addAllowedHeader("*"); source.registerCorsConfiguration("/**", config); return new FilterRegistrationBean<>(new CorsFilter(source)); } ``` --- #### 四、常见问题排查 1. **OPTIONS预检请求失败** - 确保后端允许`OPTIONS`方法 - Spring Security需配置`.antMatchers(HttpMethod.OPTIONS).permitAll()` 2. **携带Cookie失效** - 后端配置`.allowCredentials(true)` - 前端设置`axios.defaults.withCredentials = true` 3. **响应头缺失** 检查是否缺少`Access-Control-Allow-Origin`等关键头信息 --- #### 五、方案选型建议 | 场景 | 推荐方案 | |----------------------|--------------------------| | 本地开发调试 | Vue CLI代理 + 后端CORS | | 中小型生产项目 | Nginx反向代理 | | 需要精细控制API权限 | Spring Security + CORS | | 遗留系统改造 | 过滤器方案 | --- #### 六、扩展阅读 - [Spring官方CORS文档](https://docs.spring.io/spring-framework/docs/current/reference/html/web.html#mvc-cors) - [MDN跨域资源共享(CORS)](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS)[^4] --- **相关问题**: 1. 如何通过Spring Security配置跨域白名单？ 2. Nginx反向代理时如何处理WebSocket跨域？ 3. 跨域场景下如何保障JWT令牌的安全传输？
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值