Cookie 能跨域吗?如何设置?

结论先行:

在一般情况下,Cookie 是不允许跨域的。但是可以通过设置实现跨域。

首先,在服务端设置响应头:

Access-Control-Allow-Credentials: true将“允许跨域请求携带认证信息”的值设为true

Access-Control-Allow-Origin: 请求域名配置允许访问的域名

接着,在客户端也要设置 withCredentials 使其允许 Cookie 共享,就可以实现 Cookie 的跨域访问了。

具体解析: 

在同一域名下,不同页面之间可以共享 Cookie;而在不同域名下,默认情况下是不能共享 Cookie 的。

HTTP Cookie 通常是与特定域相关联的。因此在一般情况下,Cookie 是不允许跨域的。

但是通过合适的设置,可以使得某些情况下的跨域请求携带 Cookie。

同源策略:默认情况下,浏览器遵循同源策略,不允许跨域请求携带 Cookie。

即在发送跨域请求时,浏览器不会发送相应域的 Cookie 到服务器端。这是为了防止恶意网站获取用户在其他网站的信息。但是在一些特殊情况下,我们可能需要跨域携带 Cookie。

设置 Cookie 并允许跨域访问可以这样实现:

① 服务端设置响应头:

Access-Control-Allow-Credentials: true(访问控制允许凭据)

表示允许跨域请求携带认证信息(包括Cookie)

Access-Control-Allow-Origin: 请求域名(访问控制允许源)

指定允许访问的域名。表示允许该域名下的请求访问资源,而不仅仅是同一域名下的请求。

Credentials  证书;凭证  /krəˈdenʃlz/

Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Credentials: true

在客户端请求中设置 withCredentials

前端请求中需要设置 credentials: include 表示允许发送 Cookie,需要与响应头中的 Access-Control-Allow-Credentials 配合使用。 

对于跨域请求,在客户端需要明确指定携带 Cookie,可以通过 XMLHttpRequest 对象或 Fetch API 的 credentials 属性进行设置。

fetch('http://api.example.com/data', {
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json'
  }
})

在以上代码中,fetch 请求中的 credentials 设置为 include,并且响应头中设置 Access-Control-Allow-Credentials 为 true,就可以实现 Cookie 的跨域访问。

需要注意的是,跨域设置 Cookie 只能在响应中设置,而不能在请求中设置。

おすすめ

転載: blog.csdn.net/qq_38290251/article/details/134321697