如何将自定义标头参数添加到 clojurescript 中的 API GET 调用答案

【问题标题】：How can I add custom header parameters to a API GET call in clojurescript如何将自定义标头参数添加到 clojurescript 中的 API GET 调用
【发布时间】：2019-04-10 21:11:46
【问题描述】：

我正在使用 KeeFrame 在 clojurescript 中构建一个演示应用程序并检索该网站的部分信息，我需要调用一个外部 API，该 API 需要在 GET 请求中使用自定义 HTTP 标头参数

我将 re-frame.core 用于 API 调用，它使用 ajax.core。我也尝试用 cljs-http.client 替换它。然而结果是一样的。我已经设法通过在服务器站点使用 clj-http 将自定义标头参数添加到请求标头。但这不是我想为这个网站实现的解决方案，因为这意味着我首先必须重建我正在调用的 API。所以我可以在没有参数的情况下从我的 clojurescript 中使用它。

此代码有效。生成正确的 GET 请求

{:http-xhrio {
 :method          :get
 :uri             (str transuri "/acquirer/" 673072009 "/acquirerref/" acquirerRefNo)
 :headers         {"Accept" "application/json"}
 :response-format (http/json-response-format {:keywords? true})
 :on-failure      [:common/set-error]}}

以“Accept: application/json”作为请求头

此代码不起作用。生成的不是 GET 请求，而是 OPTIONS 请求

{:http-xhrio {
 :method          :get
 :uri             (str transuri "/acquirer/" 673072009 "/acquirerref/" acquirerRefNo)
 :headers         {"Accept" "application/json" "Custom" "Value"}
 :response-format (http/json-response-format {:keywords? true})
 :on-failure      [:common/set-error]}}

并且在请求标头中“Accept: application/json”不可见，但“Access-Control-Request-Headers: custom”是

我希望 GET 请求在请求标头中包含“Accept: application/json”和“Custom: Value”。

谁能告诉我我做错了什么或提供一个链接来提供相关信息？

提前致谢

【问题讨论】：

标签： api http-headers clojurescript

【解决方案1】：

浏览器将发送一个“preflight” OPTIONS 请求来验证是否允许发送“Custom”请求标头。服务器应该通过回复“Access-Control-Allow-Headers”来批准。

见https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：

确实是这样。但是由于防火墙的原因，OPTIONS 请求没有从这个站点得到响应，因此 GET 请求永远不会发送。

【解决方案2】：

我没有使用过 KeeFrame，但我有一个使用我正在开发的新 re-frame 库的工作示例。它使用此拦截器调用 ajax 请求：

(def ajax-intc
  "Interceptor for performing AJAX requests"
  (interceptor
    {:id    :ajax-intc
     :enter identity
     :leave (fn [ctx] ; #todo (with-result ctx ...)
              (let [ajax (:ajax ctx)]
                ;(t/spyx :ajax-intc-start ctx)
                ;(t/spyx :ajax-intc-start ajax)
                (when-not (nil? ajax)
                  (t/spy :awt-ajax-intc--ajax ajax)
                  (let [method            (t/grab :method ajax)
                        uri               (t/grab :uri ajax)
                        ajax-opts-present (set/intersection (set (keys ajax)) ajax-options-keys)
                        opts-map          (t/submap-by-keys ajax ajax-opts-present)]
                    ;(t/spy :ajax-intc-ready (t/vals->map method uri opts-map))
                    (condp = method
                      :get (do
                             (t/spy :awt-ajax-intc--opts-map opts-map)
                             (ajax/GET uri opts-map))
                      :put (ajax/PUT uri opts-map)
                      :post (ajax/POST uri opts-map)
                      (throw (ex-info "ajax-intc: unrecognized :method" ajax))))))
              ctx)}))

使用此事件调用时：

  (flame/dispatch-event [:ajax-demo :get "/fox.txt"
                         {:handler       ajax-handler
                          :error-handler ajax-error-handler
                          :headers       {"custom" "something"}
                          }])

可以在 Chrome 开发控制台中看到标头通过：

:awt-localstore-load-intc--loaded-value-1 {}
core.cljs:192 :awt-ajax-intc--ajax => {:method :get, :uri "/fox.txt", :handler #object[flintstones$core$ajax_handler], :error-handler #object[flintstones$core$ajax_error_handler], :headers {"custom" "something"}}
core.cljs:192 :awt-ajax-intc--opts-map => {:handler #object[flintstones$core$ajax_handler], :error-handler #object[flintstones$core$ajax_error_handler], :headers {"custom" "something"}}

如果你想尝试一下，你可以克隆这个 repo：git@github.com:cloojure/cljs-enflame.git

然后运行：

lein clean
lein figwheel

并在浏览器中查看它的运行情况。

【讨论】：