Gridsome如何配置SameSite属性解决跨站图片加载Cookie报错

问题根因 #

你遇到的SameSite报错本质是跨站请求携带的Cookie未配置正确的SameSite属性触发的浏览器安全校验，报错的触发方是被携带Cookie的所属域名，而非Gridsome本身的代码逻辑问题，可按以下不同场景处理：

解决方案 #

方案1：调整图片所属独立静态站的Cookie配置（可控图片站时优先选） #

如果图片静态站由你管控，直接在该站点的CDN/服务端响应头中，为返回的Cookie追加SameSite=None; Secure属性即可。
注意：SameSite=None必须和Secure属性同时使用，且仅在HTTPS协议环境下生效

方案2：Gridsome侧配置避免跨站请求携带Cookie（不可控图片站时使用） #

该方案的核心是让跨站图片请求不携带任何Cookie，自然不会触发SameSite校验：

• 给所有跨站图片的<img>标签添加crossorigin="anonymous"属性，标识该资源为匿名跨站请求，不携带Cookie
• 如果你封装了全局图片组件，可以直接在组件内做域名判断自动追加属性，示例代码如下：

<!-- 全局图片组件示例 -->
<template>
  <img 
    :src="imgSrc" 
    :alt="imgAlt"
    :crossorigin="isExternal ? 'anonymous' : undefined"
  />
</template>
<script>
export default {
  props: ['imgSrc', 'imgAlt'],
  computed: {
    isExternal() {
      // 替换为你的Gridsome站点主域名
      return this.imgSrc.startsWith('http') && !this.imgSrc.includes('your-domain.com')
    }
  }
}
</script>

• 如果你在Markdown内容中使用图片，可在gridsome.config.js中配置自定义remark插件批量添加属性，配置示例如下：

// gridsome.config.js
module.exports = {
  transformers: {
    remark: {
      plugins: [
        // 其余已有remark插件
        // 自定义插件处理跨站图片属性
        () => tree => {
          const visit = require('unist-util-visit')
          visit(tree, 'image', node => {
            // 替换为你的Gridsome站点主域名
            if (node.url.startsWith('http') && !node.url.includes('your-domain.com')) {
              node.data = node.data || {}
              node.data.hProperties = node.data.hProperties || {}
              node.data.hProperties.crossorigin = 'anonymous'
            }
          })
        }
      ]
    }
  }
}

方案3：调整Gridsome站点的Cookie属性（本站Cookie被跨站携带时使用） #

如果校验的是你Gridsome站点的Cookie，可直接在部署站点的AWS CloudFront响应头策略中，为站点返回的所有Cookie追加SameSite=Lax（默认推荐）或者SameSite=None; Secure（需要跨站携带Cookie时使用）属性即可。

内容的提问来源于stack exchange，提问作者bensiu