将 Mailchimp 与 Gatsby 和 Strap 集成时出现 CORS 策略错误

Question

我在尝试将 Mailchimp 与我的 Gatsby 项目集成时遇到 CORS 策略错误。错误消息指出：“已被 CORS 策略阻止：请求的资源上不存在‘Access-Control-Allow-Origin’标头。”

预期行为：

订阅请求应成功发送至 Mailchimp，并且用户应订阅时事通讯。

预期行为： 订阅请求应成功发送到 Mailchimp，并且用户应订阅时事通讯。

这是我的代码：

const SignUpBanner: React.FC<SignUpBannerProps> = ({}: SignUpBannerProps) => {
  const [email, setEmail] = useState('');
  const [subscriptionStatus, setSubscriptionStatus] = useState('');

  const handleSubscribe = async () => {
    try {
      const response = await axios.post(
        'https://xxx.us21.list-manage.com/subscribe/post?u=xxxx&id=xxxx&f_id=xxxx',
        {
          EMAIL: email,
          SIGNUP: 'HOME', // Specify your signup location here
        },
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
        }
      );

      if (response.status === 200) {
        setSubscriptionStatus('success');
      } else {
        setSubscriptionStatus('error');
      }
    } catch (error) {
      setSubscriptionStatus('error');
      console.error('Error subscribing:', error);
    }
  };

  return (
    <div className={`${paddingForBanner}`}>
      <div
        className={`${paddingForSignUpContent} d-xl-flex d-lg-flex justify-content-xl-between justify-content-lg-between`}
      >
        <div className={`${signUpHeading}`}>
          Stay connected through our newsletter!
        </div>
        <div className={`${signUptitle}`}>
          Subscribe to our newsletter and get the latest insights on history, art &
          art & culture in your inbox.
          <div className={`${emailInput} d-xl-flex d-lg-flex`}>
            <div className={`${inputDiv}`}>
              <input
                type="email"
                placeholder="Enter Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className={`${customInputField} ${emailfield} form-control`}
              />
            </div>
            <div
              className={`${signUpButton} d-flex d-lg-flex flex-row flex-lg-row justify-content-end align-items-center justify-content-lg-center `}
              onClick={handleSubscribe}
            >
              <div className={`${signUpText}`}>
                {subscriptionStatus === 'success' ? 'Subscribed!' : 'SIGNUP'}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SignUpBanner;

如何解决这个 CORS 问题？

Answer 1

为什么会出现这种情况？

Mailchimp 不允许您集成网站来源的任何资源或信息。

CORS 代表跨源资源共享，这是所有浏览器出于安全原因而使用的一种机制。为了将此策略设置到您的网站，您必须添加名为

'Access-Control-Allow-Origin'

的 HTTP 标头，如下所示：

Access-Control-Allow-Origin: https://foo.example

在您的情况下

https://xxx.us21.list-manage.com

CORS 标头设置为：

Access-Control-Allow-Origin: https://list-manage.com

这意味着只有源设置为

https://list-manage.com

的 HTTP 请求才允许向

https://xxx.us21.list-manage.com

发送请求

如何解决这个问题？

您无法更改 Origin HTTP 标头，只有两个选项：

1. 从源头请求https://list-manage.com

您必须从包含源的同一服务器发送请求

https://list-manage.com

。子域也可能包含在内，这取决于 Access-Control-Allow-Origin 设置的内容。 这意味着您可以从 https://subdomain.list-manage.com

发送请求

2. 将 Access-Control-Allow-Origin 标头更改为

   *

Mailchimp 的开发人员应将 Access-Control-Allow-Origin 标头更改为

*

，以便任何人都可以访问它并使用网站的资源和内容。

夏天

Mailchimp 的开发人员制定了这一政策，因此任何人都无法与他们的网站集成。只有他们才能改变这个机制