大家都知道,web端如果有cookie的情况下去请求服务器端是会携带上cookie状态的,但是跨域请求由于受到浏览器同源和服务端的一些限制是不会携带cookie的,今天就介绍实践一下怎么样可以跨域请求携带cookie。
首先本地启动两个node服务,node_A放静态资源和同源接口,另外一个node_B存放跨域的node接口;
node_A : node_B :
同源策略下的请求 :
node_A中的index.html:
初始化的时候是没有cookie的:
当请求同源login接口的时候服务器端会给web端注入cookie:
当web端请求同源login的时候,该请求没有携带cookie,返回response的时候回注入web端cookie:
浏览器端cookie:
等到再次请求同源接口的时候,同源register携带cookie请求就会自动携带cookie:
跨源下的请求 :
当web端请求非同源admin接口的时候:
这就是经典的跨域报错,服务器端接受到请求正常返回,但浏览器同源策略阻止你正常拿取数据,
根据提醒需要设置Access-Control-Allow-Origin,服务器端设置如下:
再次跨域请求admin接口,正常返回:
接口时可以正常返回,但是没有携带cookie,在fetch中增加相对应的配置:
再次跨域请求admin接口,返回如下错误:
翻译如下: 当请求的凭据模式为“包含”时,响应中的“访问控制允许来源”标头的值不得为通配符“*”。
就是说服务器接口配置Access-Control-Allow-Origin的时候不能是*只能是具体的ip或者域名
再次跨域请求admin接口的时候:
翻译如下:
响应中“Access Control Allow Credentials”头的值为“”,当请求的凭据模式为“include”时,该值必须为“true”。
就是说服务器端Access Control Allow Credentials必须为true
再次请求admin接口,效果如下
成功跨域请求并且携带了同源接口设置的cookie。
跨域请求携带cookie时:
1、web端需要主动添加withCredentials或者credentials为true
2、服务端需要配置Access-Control-Allow-Origin为具体的ip或者域名地址而不能为‘*’
3、服务器端需要配置Access-Control-Allow-Credentials为true