![](/img/trans.png)
[英]Chrome only sets the first cookie from the 'Set-Cookie' header
[英]Chrome get Set-cookie header but doesnt put it in a new requests
我正在使用前端使用React Native和后端使用 NodeJ 的移动应用程序。 我为这个应用程序设置了身份验证机制。 后端工作正常。 我已经用邮递员测试过。 使用正确数据登录请求后,服务器在“ Set-cookie”标头中向我发送一个 cookie。 然后我把我的下一个请求标头作为“cookie”,我得到了我的数据。 但是,当我使用 React Native 部分时,它的工作方式有所不同。 我现在正在使用Chrome 浏览器来测试应用程序,我可以看到浏览器获取了一个 set-cookie 标头,其中包含来自登录请求的响应(另外我已经看到服务器创建了一个包含用户信息的新 cookie)。 但是对于下一个请求(比如它的“/home”),它不会发回 cookie,因此服务器无法识别用户并创建一个新的 cookie(其中没有用户信息)并返回 403 响应。
人们建议您应该执行一些解决方案。 我在这里分享这些,但没有一个对我有用。
这是我的 React Native - Axios 代码
const axiosObj = axios.create({
baseURL:"http://localhost:3000/",
headers: {
'Content-Type': 'application/json',
},
responseType: 'json',
withCredentials: true,
});
export function get(url){
return new Promise(function(resolve,reject){
axiosObj.get(url).then(res => {
console.log(res)
return res.data
})
})
};
export function post(url,data){
return new Promise(function(resolve,reject){
axiosObj.post(url,data).then(res => {
console.log(res.headers)
const cookies = new Cookies(res.headers.cookie);
console.log("document cookie",document.cookie)
console.log(cookies.getAll());
resolve(res)
})
})
}
在后端这里是相关的代码
var app = express();
app.use(cookieParser('keyboard cat'));
var corsOptions = {
origin: '*',
credentials: true,
exposedHeaders: ["Set-Cookie"]
};
app.use(cors(corsOptions))
app.use(logger('dev'));
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));
//session settings
app.use(session({
genid: (req) => {
console.log('Inside the session middleware')
console.log(req.sessionID)
return uuidv4(); // use UUIDs for session IDs
},
store: new FileStore(),
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,
cookie: { httpOnly: false,
expires: new Date(Date.now() + (30 * 86400 * 1000))}
}))
这是我登录后在服务器上的会话文件
{"cookie":{"originalMaxAge":2591995208,"expires":"2020-09-22T20:22:56.993Z","httpOnly":false,"path":"/"},"passport":{"user":{"_id":"5f307fc99f5c667918a56122","username":"test","__v":0}},"__lastAccess":1598214181785}
这里可能有什么问题? 有任何想法吗?
编辑:我了解到从前端(JS)没有达到“Set-cookie”是正常的。 (尽管在某些网站中,它说您可以在 cookie 设置中设置httpOnly: false并解决此问题)。 因此,如果我没有到达前端代码中的标题,实际上并不重要。 我的响应标头中有“set-cookie”标头, chrome 无法识别 cookie 并将其放在 f12 的 cookies 部分(也没有在 req.header 中设置)。 这就是问题所在
编辑 2:我对我的问题有一些想法。
由于我正在使用 React Native 并且它不应该在 Chrome 浏览器中工作,因此可能会以某种方式导致浏览器未设置 cookie。 我将创建一个反应项目并尝试从那里访问 cookie。 =>我解决了与该问题无关的问题。 虽然我在测试应用程序时解决了问题
我的 react-native 代码出现“service-worker.js”错误。 看起来它不会影响代码的功能,但它可能会以某种方式影响这种 cookie 情况 =>解决问题后,我仍然遇到此错误,因此与此无关。
我还尝试了用于 cookie 的本机应用程序 (react-native-cookie),但它的代码仅适用于 android 或 ios,因此不适用于浏览器。
我解决了我的问题。 看起来我的代码有两个问题。 第一个是在带有 cors 设置的服务器中。 第一个版本是这样的:
var cors = require('cors');
var corsOptions = {
origin: '*',
credentials: true,
exposedHeaders: ["set-cookie"]
};
app.use(cors(corsOptions))
所以基本上我使用 cors 模块进行设置。 当我为测试创建一个 React 应用程序时,我收到了一个 cors 错误(原点错误)。 不知何故,我的 cors 设置不适用于图书馆。 所以我用下面的代码更改了这段代码。
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'Origin,X-Requested-With,content-type,set-cookie');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});
我仍然有一些 cors 错误。 您可能会收到 cors 错误的另一个原因是 chromes 同源策略。 我使用的是 Windows 10,所以我打开了下面的搜索栏并粘贴到那里
chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security
一个新的 chrome 浏览器打开,没有网络安全策略。 然后我的反应应用程序工作正常。我可以使用document.cookie访问 cookie,也在应用程序选项卡 >> cookie 下的 f12 中,我可以看到我的 cookie。 所以谷歌浏览器保存了我的 cookie。 在同一个 chrome 窗口中,我运行我的本机应用程序,它也成功运行。 所以我认为这只是因为 chrome 的安全策略并将我的 cors 设置改回来,我又开始出现错误。
所以总而言之,我必须改变两件事。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.