添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
·  阅读

大家都知道,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

分类:
前端
  •