前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[nginx配置]前后端分离部署跨域cookie共享

[nginx配置]前后端分离部署跨域cookie共享

作者头像
水煮麥楽雞
发布2022-11-20 15:17:19
1.6K0
发布2022-11-20 15:17:19
举报
文章被收录于专栏:Find­My­FUNFind­My­FUN

1. 背景

目前,Java Web开发的前后端分离技术越来越成熟,许多新开发的信息系统使用了前后端分离的方案,这里就来记录一下前后端分离的项目部署。这里我们使用的前端框架是Vue,后台使用SpringBoot框架提供数据接口。

Nginx

nginx (engine x) 是一个高性能的HTTP和反向代理服务器,这里我们使用nginx来作为前端页面的静态服务器。


2. 思路

前端部署

nginx作为静态服务器部署前端代码

后端部署

nginx配置端口转发指向后台应用服务的预设端口

nginx反向代理

将发往nginx服务器的数据请求发送到后台端口,同时重写cookie路径使前后端共享cookie


3. 代码实现

代码语言:javascript
复制
    worker_processes  1;
    
    events {
        worker_connections  1024;
    }
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;
        server {
            listen       80;
            server_name  your.domain.name;
    
            location / {
                    root html/build;
                    try_files $uri /index.html;  # try_files:检查文件; $uri:监测的文件路径; /index.html:文件不存在重定向的新路径 
                    index index.html; 
            }
    
            location /api/ {
                # 把 /api 路径下的请求转发给真正的后端服务器
                proxy_pass http://localhost:8080/;
    
                # 把host头传过去,后端服务程序将收到your.domain.name, 否则收到的是localhost:8080
                proxy_set_header Host $http_host;
    
                # 把cookie中的path部分从/api替换成/
                proxy_cookie_path /api /;
    
                # 把cookie的path部分从localhost:8080替换成your.domain.name
                proxy_cookie_domain localhost:8080 your.domain.name;
            }
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    }

版权属于:。。。源

本文链接:https://cloud.tencent.com/developer/article/2169639

转载时须注明出处及本声明。我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=2py75w7904qok

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-05-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 背景
    • Nginx
    • 2. 思路
      • 前端部署
        • 后端部署
          • nginx反向代理
          • 3. 代码实现
          相关产品与服务
          云开发 CloudBase
          云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档