跨域 img 设置 cookie

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

设置 crossorigin=”use-credentials”表明请求将带上凭据:

<img crossorigin="use-credentials" src="https://asset.xxx.xxx/cxk.jpeg" >

不能通过js代码设置跨域的domain:

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 请求,所以要设置绿框的内容

跨域 img 设置 cookie

web服务器的设置(nginx):

    add_header  Access-Control-Allow-Origin   具体的某个源 ;
    add_header  Access-Control-Allow-Credentials   true ;

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

跨域 img 设置 cookie

© 版权声明
THE END
如果内容对您有所帮助,就支持一下吧!
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容