前言：
现时大家对“nginx跨域设置cookie”大概比较讲究，小伙伴们都需要学习一些“nginx跨域设置cookie”的相关知识。那么小编在网络上收集了一些关于“nginx跨域设置cookie””的相关内容，希望看官们能喜欢，大家一起来了解一下吧！转载链接：
简介
对于切图仔而言，跨域是个非常熟悉的名词了。虽然浏览器为了我们的网站安全操碎了心，但是往往我们为了网站能够被用户正常访问，不得不绕过这个限制，cors就是其中一种常用的解决跨域的方案。
通过设置Access-Control-Allow-Credentials: true和xhr.withCredentials = true，可以实现跨域传递Cookie，达到保存用户登录态等目的。这种方案虽好，但是如果使用不当，会有CSRF的风险。所以，从Chrome 51开始，浏览器的Cookie新增加了一个SameSite属性，用来防止CSRF攻击和用户追踪。
该特性当前默认是关闭的，但是有部分用户已经提前受到了影响。如果你出现了无法使用某些网站的第三方登录功能的时候，请检查是不是受了该设置的影响。
亲自体验禁用SameSite验证
虽然官方声明，从Chrome 79开始，该功能就会默认开启（之前宣称是从Chrome 80开始，最新的声明已经改了），但是经测试发现，部分用户在默认情况下该功能仍然是关闭的，所以我们先禁用SameSite验证，看看情况会怎样。
打开Chrome设置，将chrome://flags/#same-site-by-default-cookies先禁用，然后重启浏览器。
使用本文最后面的示例代码，在本地模拟登录操作跨域获取Cookie，然后携带Cookie获取用户信息。
可以发现，我们能够正常使用服务端写入的Cookie来发送请求并获取用户信息，但是会在Console中看到一条警告信息。
按照程序员一贯的“警告即可忽略”的原则，我们似乎可以不用管这个特性。但是一旦Chrome浏览器全面开启SameSite特性，且用户升级了浏览器，那么基于Cookie跨域登录的网站都将无法登录。接下来我们模拟下这个过程。
启用SameSite验证
同样打开Chrome设置，将chrome://flags/#same-site-by-default-cookies启用，然后重启浏览器。
清空Cookie并重新登录。注意：Cookie是在后端域名下，不要清除前端域名对应的Cookie。
这时我们可以发现：请求的Response Cookies下，SameSite属性有了一个提示信息，告诉我们SameSite属性没有设置，将使用默认值Lax。
此时再去获取用户信息，将无法成功获取，因为Cookie没有跟随请求一起带给后端服务。经过检查可以发现，该Cookie没有成功写入用户浏览器。
由此可见，如果不想2020年背故障，那么现在就要开始提前处理这个问题了。
处理SameSite验证
SameSite属性的默认值Lax只允许get请求携带Cookie，这显然没法满足，所以我们将SameSite属性的值改为None，同时将secure属性设置为true。这也意味着你的后端服务域名必须使用https协议访问。
// 注意：cookie 模块必需要更新到最新的版本(0.4.0)，才支持 sameSite=noneres.cookie('token', 'token 123', { maxAge: 2592000000, httpOnly: true, sameSite: 'none', secure: true, });复制代码再次尝试可发现，问题解决。
不过，这只是一种权宜之计，因为设置sameSite为None之后，CSRF的风险又回来了。所以，换成token的检验方式而不依赖Cookie，或许才是更合理的解决方案。
完整示例
以下是完整的示例代码及Nginx配置。
app.js
var path = require('path');var cors = require('cors');var express = require('express');var cookieParser = require('cookie-parser');var app = express();app.use(cors({ origin: true, credentials: true, }));app.use(express.json());app.use(express.urlencoded({ extended: false }));app.use(cookieParser());app.use(express.static(path.join(__dirname, 'public'))); // index.html放在public目录下app.get('/api/info', function login(req, res) { let token = req.cookies['token']; if (token) { res.json({ success: true, data: { name: 'somebody', age: 21 } }); } else { res.json({ success: false, message: '请先登录' }); }});app.get('/api/login', function login(req, res) { res.cookie('token', 'token 123', { maxAge: 2592000000, httpOnly: true, }); res.end();});app.get('/api/login/security', function login(req, res) { // 注意：cookie 模块必需要更新到最新的版本(0.4.0)，才支持 sameSite=none res.cookie('token', 'token 123', { maxAge: 2592000000, httpOnly: true, sameSite: 'none', secure: true, }); res.end();});app.listen(8888, function () { console.log(';);});复制代码index.html
<html><head> <title>Demo</title> <style> button { width: 80px; height: 32px; line-height: 32px; text-align: center; } </style></head><body><div> <p> <button id="login">登录</button> <button id="security">安全登录</button> </p> <p> <button id="check">查询</button> </p></div><script> (function() { var get = function get(url, callback) { var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.open('get', url); xhr.onreadystatechange = function onreadystatechange() { if (xhr.readyState === 4) { var res = xhr.response; try { res = JSON.parse(res); } catch (e) {} typeof callback === 'function' && callback(res); } }; xhr.send(null); }; var login = document.querySelector('#login'); var check = document.querySelector('#check'); var security = document.querySelector('#security'); login.addEventListener('click', function onLogin() { get(';); }); check.addEventListener('click', function onLogin() { get(';, function callback(res) { if (res.success) { console.log(res.data); } else { alert(res.message); } }); }); security.addEventListener('click', function onLogin() { get(';); }); })();</script></body></html>复制代码nginx.conf
server { listen 443 ssl; server_name api.server.cn; ssl_certificate /path/to/ssl/server.crt; ssl_certificate_key /path/to/ssl/server.key; ssl_ciphers HIGH:!aNULL:!MD5; location / { proxy_pass ; }}复制代码hosts
127.0.0.1 api.server.cn复制代码
注意
因为我们的证书是自签名的，并不能真正通过浏览器的证书检验，所以需要先手动点击“继续前往xxx（不安全）”，才能正常向后端服务发送请求。
转载链接：
标签： #nginx跨域设置cookie
