04月27, 2019

nginx的记录(6)

背景:后端设置了cookie path,导致前后分离时,登录不了。

场景是这样的:后端的api context是/a,然后登录成功写cookie时,会写到/a的path下面去。然后前后分离后,nginx配置是/a的路径,去转发请求到后端,所以前端的访问路径里面是不可能有/a的。

好,我们可以让后台简单粗暴地将cookie种到根目录下。

但假设有两个应用:demo1demo2。它们的端口都是相同的,那么如果访问路径是/demo1demo2,将cookie写到/下面,会有很大的概率会冲突。

当然实际中,两个应用的端口号一般会区分开来的。

这里还有另外的一种解决方案,就是通过nginx来重写cookie path:

proxy_cookie_path  server_path nginx_path

那么来测试一下吧:

服务端

可以用koa-generator的脚手架,快速生成一个koa的项目。然后搞一个路由:

const router = require('koa-router')()

router.prefix('/users')

router.get('/getName', (ctx, next) => {
  ctx.cookies.set(
    'name', 
    'zpu',
    {
      path: '/users',       // 写cookie所在的路径
      maxAge: 10 * 60 * 1000, // cookie有效时长
    }
  )
  ctx.body = {
    a: 1, 
    b: 2
  }
});

module.exports = router

alt

前端

写一个简单的html页面,放在/Users/zhangpu/Documents/frontEnd/my-daily-growth/nginx-test/demo1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button id="test">点我</button>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script>
    const obtn = document.getElementById("test");
    obtn.onclick = function() {
      axios.get('/users/getName').then((res) => {
        console.log(res.data);
      })
    }
  </script>
</body>
</html>

nginx配置

server {
    listen       3338;
    server_name  localhost;
    root /Users/zhangpu/Documents/frontEnd/my-daily-growth/nginx-test/;

    location / {
        index index.html;
    } 

    location ~ /users/ {
        proxy_pass       http://127.0.0.1:3000;
        proxy_set_header            Host $host;
        proxy_set_header            X-Real-IP $remote_addr;
        proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
    } 
}

注意了,现在没配置proxy_cookie_path

alt

我们在代理请求那里面,再加一条:

proxy_cookie_path /users /demo1;

/users是后端的cookie_path,demo1是我想设置的cookie_path(url上就是表示demo1这个应用)。

那么再来看看效果吧:

alt

点了之后能出来了!!!

本文链接:www.my-fe.pub/post/note-for-nginx-6.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。