跨域问题导致设置 cookie 不生效

Taste 发布于2019-08-22 15:05 / 1567人阅读

摘要：我们看下跨域不生效的问题，首先抛出两个问题我们如何设置又如何确定设置是否生效了首先，我们实现一个简单的接口新建一个文件，将如下代码复制进去，通过启动服务，在本地就可以通过来访问了我们创建的接口了环境安装的教程网上有很多详细的教程，本文不再赘

我们看下跨域不生效的问题，首先抛出两个问题：

我们如何设置 cookie ？

又如何确定 cookie 设置是否生效了？

首先，我们实现一个简单的接口,新建一个 test.js 文件，将如下代码复制进去，通过 node test.js 启动服务，在本地就可以通过 http://localhost:3000/rest/collect/event/h5/v1/ 来访问了我们创建的接口了（node 环境安装的教程网上有很多详细的教程，本文不再赘述）

var express = require("express");
var app = express();
var URL = require("url")
var path = require("path");


app.post("/rest/collect/event/h5/v1/", function(req, res) {
        res.cookie("token","11111112222222224444444444")
        res.cookie("httpOnly-token","11111112222222224444444444",{ httpOnly: true })

    function User() {
            this.name;
            this.city;
            this.age;
    }

    var user = new User();

    if(params.id == "1") {

            user.name = "ligh";
            user.age = "1";
            user.city = "北京市";

    }else{
            user.name = "SPTING";
            user.age = "1";
            user.city = "杭州市";
    }

    var response = {status:1,data:user};
    res.send(JSON.stringify(response));
});

app.listen(3000);
console.log("Listening on port 3000...");

访问效果如下

在前端代码中访问我们的接口

在浏览器中我们可以看到请求的 Resopnse Headers 里，有两个 set-cookie头部，区别在于一个带有 HttpOnly的标识，我们打开浏览器的调试窗口Application我们可以看到，两个数值都被设置到浏览器里了，httpOnly的值在浏览器调试窗口的http一栏，打了个小勾，说明这个变量是只能通过 http 请求来获取到这个cookie ，前端无法通过 js 的 document.cookie来获取到

讲到这块内容，我们顺便讲下 cookie 设置的其他参数的作用

cookie 和域名相关的哟，Domain 变量表示 cookie 生效的域名，expries和max-age表示 cookie 的有效时间

问题描述及解决

在开发阶段我自己用node 简单的写了一个接口，便于联调前端传参问题，希望通过 http 的set-cookie 存储变量，但是却始终没有把 cookie 成功设置到浏览器里，经过排查发现是跨域导致的 cookie 设置不生效

不生效的原因是我本地项目启动在 http://localhost:70,但是调用的接口在 http://localhost:3000上，端口不一样，存在跨域的问题，所以虽然在 Response Header 里看到了set-cookie的操作，但是在浏览器的 application里看到，并没有被设置进来，解决办法，通过nginx 代理（最长用的跨域解决办法）

扩展

跨域的问题在开发过程中比较常见，我们经常会碰到，简单来说只要请求资源的协议，域名，端口不一致，都会导致跨域，网上的解决方法也比较多，比较成熟，本文不做扩展，附带几个链接供大家参考

跨域中的预检测请求
CORS 跨域中的 Cookie
跨域资源共享 CORS 详解
Web开发中跨域的几种解决方案

混合云服务器托管跨域cookie java跨域cookie共享不实名认证导致跨域问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93157.html

cookie与session详解

摘要：所谓的无连接就是服务器收到了客户端的请求之后，响应完成并收到客户端的应答之后，即断开连接。从而节省传输时间。协议对事务的处理没有记忆能力。这种方式某种方面上讲解放了服务器，但是却不利于客户端与服务器的连接。 session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别，登录验证，数据传输等.举个例子，就像我们去超市买东西结账的时候，我们要拿出我...

SwordFly 2019-07-01 11:03 评论0 收藏0
Response Headers 的 Set-Cookie 前端读取不到 ?

摘要：可选的最长有效时间，格林尼治标准时间。如果不传表示这是一个会话期。默认值为当前文档访问地址的主机名不包含子域名。设置的目录及其子目录都生效。可选设置了属性的不能使用经由属性和进行访问以防范跨站脚本攻击。问题描述先看下后台返回的Set-Cookie字段：showImg(https://segmentfault.com/img/bVbulhz?w=858&h=128);查看浏览器Co...

zhangqh 2019-08-23 18:18 评论0 收藏0
跨域，拒绝说概念，上demo

摘要：文章列出解决方案以及对应的，拒绝说概念，不在稀里糊涂。服务器据此决定，该实际请求是否被允许。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。文章列出解决方案以及对应的demo，拒绝说概念，不在稀里糊涂。什么情况出现跨域？协议不同域名不同端口不同跨域解决方案 1.同一个主域下...

IamDLY 2019-08-23 17:10 评论0 收藏0
前端面试--网络

摘要：从前发送请求后需等待并收到响应，才能发送下一个请求。第二次握手接收到包后就返回一个，随机数，包以及一个自己的包，然后等待的回复，进入状态已接收状态。 1.Http协议 1.1 Http结构图 showImg(https://segmentfault.com/img/bVbsrzu?w=1240&h=702); 1.2 什么是Http协议 HTTP协议是Hyper Text Transf...

calx 2019-08-23 17:21 评论0 收藏0
nginx解决跨域问题

摘要：一产生跨域的原因浏览器限制跨域请求二解决思路解决跨域有多重，在这里主要讲用解决跨域代理浏览器禁止检查跨域三下载安装下载地址选择其中一个版本下载，再解压即可使用在目录下输入，若出现版本号，则安装成功四反向代理解决跨域客户端解决跨域我们使用的一. 产生跨域的原因 1.浏览器限制 2.跨域 3.XHR（XMLHttpRequest）请求二. 解决思路解决跨域有多重，在这里主要讲用ngi...

Jeffrrey 2019-08-26 13:50 评论0 收藏0