为何CORS POST请求表单提交可行，XMLHttpRequest却失败？

这事儿我之前帮朋友排查过，核心原因在于浏览器对两种跨域请求的处理逻辑完全不一样：

1. 浏览器的同源策略和CORS规则只针对AJAX类请求 #

浏览器的同源策略是为了保护用户数据安全，限制脚本（比如你的XMLHttpRequest）从当前域名以外的服务器获取数据。当你用JS发起跨域AJAX请求时，浏览器会：

• 先发送一个OPTIONS预检请求（复杂请求时），或者直接在请求后检查响应头；
• 必须看到目标服务器返回Access-Control-Allow-Origin头，且值包含当前域名，才会允许脚本获取响应内容，否则就抛出你看到的那个错误。

而HTML表单的POST提交属于传统的跨域表单提交，这种请求的目的是让页面跳转到目标服务器的响应页面，不是在当前页面异步获取数据，所以浏览器不会触发CORS检查，也不要求目标服务器返回Access-Control-Allow-Origin头——哪怕跨域，表单提交也能正常完成。

2. Mailchimp的接口设计就是支持表单提交，而非前端AJAX #

你用的那个https://EXTERNAL_URL应该是Mailchimp生成的表单提交端点，它的配置就是专门给传统HTML表单用的，默认没有开启CORS支持（毕竟前端AJAX跨域调用会有安全风险，比如泄露用户数据或者被恶意调用），所以你的JS代码发起的AJAX请求会被浏览器拦截，而直接提交表单却能正常工作。

给你几个可行的解决办法： #

• 用Mailchimp官方的嵌入式表单：直接从Mailchimp后台复制生成的嵌入代码，他们已经用iframe或者封装好的脚本处理了跨域问题，不用自己写AJAX；
• 搭一个后端代理：在自己的服务器上写一个接口，前端把邮箱发给这个接口，然后后端再用服务器端请求（比如Node.js的fetch、PHP的cURL）转发给Mailchimp的接口——服务器端请求不受浏览器同源策略限制；
• 使用Mailchimp的官方API：如果需要自定义逻辑，可以用Mailchimp的List Members API，但注意API密钥绝对不能放在前端代码里，必须通过后端调用，不然会泄露密钥导致账户风险。

举个简单的后端代理例子（Node.js/Express）：

const express = require('express');
const fetch = require('node-fetch');
const app = express();
app.use(express.urlencoded({ extended: true }));

app.post('/add-mailchimp-email', async (req, res) => {
  const email = req.body.EMAIL;
  try {
    const response = await fetch('https://EXTERNAL_URL', {
      method: 'POST',
      body: `EMAIL=${email}`,
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });
    const data = await response.text();
    res.send(data);
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

然后前端的addEmail函数就请求自己的代理接口/add-mailchimp-email就行，这样就不会有CORS问题了。

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