跨域 img 设置 cookie

Posted 2023-03-22

参考技术A 从技术层面来讲，我们可以设置 <img> 标签需要带上cookie等凭据来向后端请求图片资源，后端检测凭据是否合法来决定是否返回相应资源
以 img 标签为例，其它例如 <audio>、<img>、<link>、<script> 和 <video> 均有一个跨域属性 (crossOrigin property)，它允许你配置元素获取数据的 CORS 请求。

设置 crossorigin="use-credentials"表示请求将带上凭据：

Note: The domain must match the domain of the javascript origin. Setting cookies to foreign domains will be silently ignored.
https://stackoverflow.com/a/6761443

用于演示携带的 cookie
因为是跨域请求，这时候要浏览器带上cookie就需要设置以下红色框的内容，又因为是 https 请求，所以要设置绿框的内容

web服务器的设置(nginx)：

最终可以看到请求中携带了cookie:

js中cookie可以跨域取值吗

正常情况下，浏览器禁止跨域获取cookie
一般通过sso服务可以实现取得跨域cookie，思路如下：
域A页面访问位于域A的服务器，对权限进行验证
域A服务器于域B服务器通信，记录一个唯一的加密串用作身份验证域（并将cookie信息发送给域B服务器）
域A服务器返回302跳转，跳转到域B下，并将加密串作为url的一部分
页面由域A跳转到域B，域B服务器通过加密串获取到事先从域A服务器上得到的cookie信息，并在响应头中添加set-cookie字段设置cookie 参考技术A cookie是针对域名生效的，每个域名对应一个不同的cookie。 你的网站和别人的网站不功用一个cookie。本回答被提问者采纳