vue开发环境多工程cookie共享配置

博客介绍本地开发必备,使用win nginx - 1.16.1版本并配置nginx和host,所有web用xby.imflea.com域名登陆。还阐述Cookie多网站共享原理,即统一一个父域名,其他在该域名下代理完成。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、本地开发必备

  1. nginx(本人用的是win nginx-1.16.1版本的) ;
  2. 配置nginx:

#user  nobody;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    client_header_timeout 15;
    client_body_timeout 15;
    send_timeout 25;
	client_max_body_size 500m;
  	add_header Access-Control-Allow-Origin *;
  	add_header Access-Control-Allow-Headers X-Requested-With;
  	add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

	server {
    	listen 80;
    	server_name localhost;
    	root  html;
	
		location /api/ {
			proxy_pass http://你的后台服务ip或者域名:8680/api/;
		}
	
		location ^~ /static-web-1/ {
	  	proxy_pass http://127.0.0.1:8082/static-web-1/;       
		}
		
		location ^~ /static-web-2/ {
	  		proxy_pass http://127.0.0.1:8081/static-web-2/;       
		}

		location ^~ /admin-static-web/ {
			proxy_pass http://127.0.0.1:8080/admin-static-web/;    
		}
		
		#可以用这种方式代理本地的开发,nginx支持vue多项目代理
    	location / {
        	proxy_pass http://127.0.0.1:8080/;       
    	}     						
  	}   
}

  1. 配置host(C:\Windows\System32\drivers\etc)
# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost
127.0.0.1       ljq.imflea.com
  1. 全部web都使用xby.imflea.com这个域名登陆即可

二、图搞懂cookie多网站共享原理

在这里插入图片描述

说白了就是统一一个父域名,其他的都在这个域名下代理完成即可。

<think>好的,我现在要解决用户的问题:在Vue和Spring Boot项目中,同浏览器同域名下不同端口,如何实现Cookie共享。首先,我需要理解这个问题的背景。用户可能是在开发前后端分离的应用,前端用Vue运行在比如8080端口,后端用Spring Boot在8081端口。由于端口不同,默认情况下,浏览器不会共享Cookie,导致会话状态无法保持,比如登录状态失效。 接下来,我得回忆一下Cookie的同源策略。同源指的是协议、域名、端口都相同。虽然这里域名相同,但端口不同,属于不同源,所以Cookie共享。但用户提到的是同域名不同端口,可能需要利用Cookie的作用域设置来绕过限制。 首先,Cookie的作用域由domain和path属性控制。默认情况下,domain是当前域名,不包括子域名,而path是当前路径。如果显式设置domain为顶级域名,比如.example.com(假设实际域名是app.example.com),那么子域名之间可以共享Cookie。但这里端口不同,domain相同,端口不同,是否可行? 不过,根据标准,Cookie不区分端口,也就是说,如果domain和path相同,即使端口不同,Cookie也会被发送。但实际操作中,有些浏览器可能对此处理不一致,需要测试。但根据RFC 6265,端口不是Cookie作用域的一部分,所以理论上设置domain正确的话,不同端口的Cookie可以共享。 那在Spring Boot后端,需要设置Cookie的domain属性为当前域名的顶级域名,比如如果前端运行在localhost:8080,后端在localhost:8081,domain应该设为localhost。或者如果是实际域名,比如example.com,则domain设为.example.com,这样所有子域名都可以共享。 然后,前端Vue需要允许跨域请求携带Cookie。使用axios的话,需要设置withCredentials为true。同时,Spring Boot后端需要配置CORS,允许前端的源,并设置allowCredentials为true,同时暴露必要的头信息。 可能还需要注意SameSite属性。现代浏览器默认将Cookie的SameSite设为Lax,这可能会阻止跨站点请求携带Cookie。所以需要将SameSite设为None,并且Secure属性为true(即使用HTTPS)。但如果是本地开发(HTTP),可能需要暂时关闭SameSite限制,或者使用localhost作为域,浏览器可能会宽松处理。 总结步骤应该是: 1. 后端设置Cookie的domain属性为顶级域名,比如localhost或.example.com。 2. 后端配置CORS,允许前端端口,设置允许凭证,并暴露Set-Cookie头。 3. 前端请求时携带withCredentials。 4. 调整SameSite和Secure属性以适应开发环境。 需要验证这些步骤是否正确,比如在Spring Boot中如何设置Cookie的domain,如何配置CORS,以及前端是否正确发送请求。可能存在的一些问题包括浏览器安全策略、HTTPS要求等,可能需要具体调整配置。</think>在Vue+SpringBoot项目中解决同域名不同端口的Cookie共享问题,需按以下步骤操作: --- ### 一、问题根源 浏览器默认Cookie策略中: - **同源策略**:协议+域名+端口三者完全一致 - **Cookie作用域**:默认仅包含当前端口,不同端口无法共享 --- ### 二、后端配置(SpringBoot) #### 1. 设置Cookie作用域 ```java // 登录接口示例 @PostMapping("/login") public ResponseEntity<?> login(HttpServletResponse response) { Cookie cookie = new Cookie("token", "your_token_value"); cookie.setDomain("localhost"); // 关键!设置顶级域名 cookie.setPath("/"); // 全局路径 cookie.setMaxAge(3600); cookie.setHttpOnly(true); // 本地开发时关闭Secure,生产需启用 // cookie.setSecure(true); response.addCookie(cookie); return ResponseEntity.ok().build(); } ``` #### 2. 配置CORS跨域 ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8080") // 前端地址 .allowedMethods("*") .allowedHeaders("*") .allowCredentials(true) // 允许携带凭证 .exposedHeaders("Set-Cookie"); // 暴露Set-Cookie头 } } ``` --- ### 三、前端配置Vue) #### 1. axios全局配置 ```javascript // main.js axios.defaults.withCredentials = true // 允许发送Cookie ``` #### 2. 请求示例 ```javascript axios.post('http://localhost:8081/login', data) .then(response => { // 后续请求会自动携带Cookie }) ``` --- ### 四、关键注意事项 1. **SameSite属性**(需配合使用): - 开发环境:`SameSite=None; Secure`(本地需HTTPS) - 生产环境:必须使用HTTPS + `Secure`属性 2. **域名一致性**: - 禁止混用`localhost`和`127.0.0.1`,浏览器视为不同域名 3. **浏览器安全策略**: - Chrome 94+ 需要HTTPS才能使用`SameSite=None` - 本地开发可通过`chrome://flags/#same-site-by-default-cookies`临时禁用限制 --- ### 五、验证流程 1. 登录后检查浏览器Application > Cookies是否显示正确domain 2. 发起跨端口请求查看请求头是否携带Cookie 3. 检查响应头`Access-Control-Allow-Credentials: true` --- ### 六、生产环境优化 1. 使用Nginx反向代理统一端口 ```nginx server { listen 80; server_name example.com; location /api { proxy_pass http://backend:8081; } location / { proxy_pass http://frontend:8080; } } ``` 2. 配置HTTPS证书 3. 严格设置Cookie的`Secure`和`HttpOnly`属性 通过以上配置,可实现同域名不同端口的安全Cookie共享。实际部署时建议使用统一端口代理方案,从根本上规避跨端口问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值