Gatsby集成Mailchimp出现Cookie跨域SameSite属性配置报错问题

该报错是Mailchimp服务端返回的Set-Cookie响应头未配置SameSite属性触发的浏览器跨站Cookie安全提示，gatsby-plugin-mailchimp未暴露相关配置入口，无法通过插件参数直接解决该问题。

你完全可以改用fetch/JSONP自行实现订阅请求，你已经完成Postman接口测试，实现成本很低，还能规避插件封装带来的不可控问题，具体实现如下：

1. 从Postman复制测试通过的Mailchimp公开表单订阅接口地址，注意不要使用需要携带API密钥的管理端接口，避免密钥泄露。
2. 替换原有提交逻辑即可，示例代码：

// 可选安装jsonp处理跨域，也可直接用fetch no-cors模式
// npm install jsonp
import jsonp from 'jsonp'

// 替换原有_handleSubmit方法
_handleSubmit = async e => {
  e.preventDefault()
  // 替换为你自己的Mailchimp接口地址，邮箱参数做转义处理
  const subscribeUrl = `你的Mailchimp订阅接口地址&EMAIL=${encodeURIComponent(this.state.email)}`
  jsonp(subscribeUrl, { param: 'c' }, (err, data) => {
    if (err) {
      this.setState({result: {status: 'error', msg: '订阅失败，请稍后重试'}})
      return
    }
    this.setState({result: data.result === 'success' 
      ? {status: 'success', msg: '订阅成功'} 
      : {status: 'error', msg: data.msg}
    })
  })
}

• 若不想额外安装依赖，可直接使用fetch的no-cors模式发送请求，缺点是无法读取接口返回结果，只能默认提示订阅请求已提交。
• 自行实现后不会再触发SameSite Cookie相关报错，功能与原插件实现完全一致。
• 若暂时不想改动代码，该警告本身不会直接阻塞订阅功能运行，仅在部分高安全等级浏览器中可能出现Cookie被拦截、订阅状态判断异常的问题。

内容的提问来源于stack exchange，提问作者Zulzidan.com