Re-frame中Mailchimp Ajax表单跨域报错问题求助

问题分析 #

你遇到的情况很典型：用re-frame的http-xhrio调用Mailchimp订阅接口时，明明后台已经处理了订阅（能收到确认邮件），但前端却触发了:on-failure事件，报错提示No 'Access-Control-Allow-Origin' header，而依赖jQuery的版本却能正常工作。

核心原因很明确：你的http-xhrio请求用的是普通XHR（XMLHttpRequest），受浏览器同源策略限制触发了CORS错误；而jQuery的.ajax在跨域场景下自动切换为JSONP方式，绕过了CORS限制。

两者的关键差异 #

1. 请求方式本质不同

   • jQuery的.ajax当设置dataType: "json"且请求跨域时，会自动切换为JSONP请求——本质是动态创建<script>标签加载资源，不属于XHR范畴，不受同源策略约束。Mailchimp的这个接口正好支持JSONP（你URL里的&c=?就是JSONP回调参数的占位符）。
   • re-frame的http-xhrio默认使用普通XHR请求，没有自动启用JSONP，所以浏览器会拦截请求返回CORS错误，尽管Mailchimp后台已经处理了订阅逻辑。

2. 参数处理细节差异

   • jQuery会自动把data里的参数拼接到URL，并替换url里的?为生成的回调函数名，完美适配JSONP请求的格式要求。
   • 你的http-xhrio配置用了ajax/json-request-format，这是给XHR请求设置JSON请求头，但Mailchimp的这个GET接口不需要JSON格式的请求体，反而需要参数拼在URL上，同时缺少JSONP的回调配置。

修复方案 #

修改http-xhrio的配置，显式启用JSONP支持，适配Mailchimp的接口要求：

(ns foo.events 
  (:require [re-frame.core :as rf] 
            [ajax.core :as ajax] 
            [day8.re-frame.http-fx]))

(rf/reg-event-db :mc/yes 
  (fn [db res] 
    (prn "Success:" res) 
    db))

(rf/reg-event-db :mc/no 
  (fn [db res] 
    (prn "Failure:" res) 
    db))

(rf/reg-event-fx :mc 
  (fn [_ _] 
    {:http-xhrio 
     {:method :get 
      :uri "https://XXX.us15.list-manage.com/subscribe/post-json?u=XXX&id=XXX&c=?" 
      :params {"FNAME" "fooobar" "EMAIL" "some.dude@example.com"} 
      ; 配置JSONP响应格式，指定回调参数为"c"（对应URL里的&c=?）
      :response-format (ajax/jsonp-response-format {:callback-param "c"}) 
      :on-success [:mc/yes] 
      :on-failure [:mc/no]}}))

为什么这样能解决问题？ #

• ajax/jsonp-response-format会告诉http-xhrio发起JSONP请求，自动生成回调函数，并替换URL里的c=?为回调函数名，完全符合Mailchimp接口的JSONP要求。
• JSONP请求不受同源策略限制，浏览器不会拦截响应，所以请求会正常触发:on-success事件，同时Mailchimp的订阅逻辑也能正常执行。

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