我正在学习如何使用试剂 clojure，并且正在创建一个密码管理应用程序以及一些基本的增删改查操作。现在，当我尝试删除密码或在后端使用密码生成功能时，无论我做什么，它都会导致 CORS 请求失败。我会分享我的相关后端和前端功能以及错误信息。
浏览器中的错误消息
POST
http://localhost:3000/remove-a-password
CORS Missing Allow Origin
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/remove-a-password. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 500.
Failed to remove password:
Object { meta: null, cnt: 3, arr: (6) […], __hash: null, "cljs$lang$protocol_mask$partition0$": 16647951, "cljs$lang$protocol_mask$partition1$": 401412 }
好的，这是我的后端
(ns LPM.clj.routes
(:require [compojure.core :refer [defroutes POST GET DELETE]]
[ring.adapter.jetty :refer [run-jetty]]
[ring.middleware.json :refer [wrap-json-body wrap-json-response]]
[ring.middleware.cors :refer [wrap-cors]]
[clojure.data.json :as cjson]
[LPM.clj.user :as usr]
[LPM.clj.pwfuncs :as pwf]
[clojure.tools.logging :as log]))
(def current-user (atom
{:users
{"profile" {:userProfileName "Admin User"
:userLoginPassword "password123"
:passwords [{:pName "example"
:pContent "exampleContent"
:pNotes "Example note"}]}}}))
(defn remove-a-password
[profile-name pw-to-remove]
(swap! current-user update-in
[:users profile-name :passwords]
(fn [passwords]
(let [updated-passwords (remove #(= (:pName %) pw-to-remove) passwords)]
(log/info "Updated passwords after removal:" updated-passwords)
updated-passwords))))
(defroutes app-routes
...Other working routes up here..
(POST "/remove-a-password" {:keys [body]}
(let [profile-name (:userProfileName body)
pName (:pName body)]
(log/info "L->Handling password removal" body)
(usr/remove-a-password profile-name pName)
{:status 200
:headers {"Content-Type" "application/json"}
:body (cjson/write-str {:message "L-> Password removed successfully"})}))
(GET "/generate-a-password" [size]
(pwf/generate-password size)))
^These two routes don't work even though I can add passwords and users
(def handler
(-> app-routes
(wrap-cors :access-control-allow-origin #".*"
:access-control-allow-methods [:GET :POST :OPTIONS :DELETE]
:access-control-allow-headers ["Content-Type" "Authorization"]
(fn [request]
(let [response (handler request)]
(-> response
(assoc-in [:headers "Access-Control-Allow-Origin"] "*")
(assoc-in [:headers "Access-Control-Allow-Methods"] "*")))))
(wrap-json-body)
(wrap-json-response)))
(defn -main [& args]
(run-jetty handler {:port 3000 :join? false}))
^Me allowing everything conceivable
好的，这是我的相关前端
(def user-state (r/atom {:userProfileName "nil"
:userLoginPassword nil
:passwords []}))
(defn remove-pw-request [profile-name pName]
(ajax/POST "http://localhost:3000/remove-a-password"
{:params {:userProfileName profile-name
:pName pName}
:headers {"Content-Type" "application/json"}
:format :json
:response-format :json
:handler (fn [response]
(js/console.log "Removed password:" response)
(swap! user-state update :passwords
(fn [passwords]
(remove #(= (:pName %) pName) passwords))))
:error-handler (fn [error]
(js/console.error "Failed to remove password:" error))}))
(defn generate-password-request [size]
(let [url (str "http://localhost:3000/generate-a-password?size=" size)]
(ajax/GET url
{:response-format :json
:handler (fn [response]
(js/console.log "Generated password:" (:password response)))
:error-handler (fn [error]
(js/console.error "Failed to generate password:" error))})))
^These are my front end handlers
Here is where I call the functions in my front end:
(defn delete-pw-component [profile-name pName]
(let [click-handler
(fn [] (help/remove-pw-request profile-name pName))]
[:div.remove-button-container
[:input {:type "button"
:id "delete-pw-component"
:value "X"
:style {:padding-top "0px"
:padding-right "4px"
:font-style "bold"
:color "#781848"
:cursor "pointer"
:transform "translate(1vw, -0.2vh)"}
:on-click click-handler}]]))
(defn logged-in-view [profile-name]
(let [passwords (@help/user-state :passwords)]
[:div.main-container
[heading-box]
[:div
(when (not @help/show-add-form)
[:div
[:h2 (str "Hello " profile-name ", you logged in at " (current-time))]
[plus-sign-component]])
(when @help/show-add-form
[generation-form-box])
(when (and (not @help/show-add-form) (empty? passwords))
[:div
"You have no passwords yet"])
(when (not @help/show-add-form)
[:ul
(for [{:keys [pName pContent pNotes]} passwords]
^{:key pName}
[:li.password-list (str "Name: " pName ", Content: " pContent ", Notes: " pNotes)
[delete-pw-component (@help/user-state :userProfileName) pName]])])]]))
我也可以提供任何必要的进一步信息。
我尝试将具有删除功能的 POST 请求转换为 DELETE 请求，由于某种我无法弄清楚的原因，当我这样做时，它会向我发送两个失败的请求，所以也许这是一个线索？
选项 http://localhost:3000/删除密码 CORS 缺少允许来源
跨源请求被阻止：同源策略不允许读取 http://localhost:3000/remove-a-password 处的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”丢失）。状态代码：500。
跨源请求被阻止：同源策略不允许读取 http://localhost:3000/remove-a-password 处的远程资源。 （原因：CORS请求未成功）。状态码：（空）。
删除密码失败： 对象 { 元：null，cnt：3，arr：（6）[…]，__hash：null，“cljs$lang$protocol_mask$partition0$”：16647951，“cljs$lang$protocol_mask$partition1$”：401412 }
这是使用 DELETE 而不是 post 删除密码时出现的错误。我没有主意了...
shadow-cljs - HTTP 服务器位于 http://localhost:8080 Shadow-cljs - 服务器版本：2.28.10 运行在 http://localhost:9630 Shadow-cljs - nREPL 服务器在端口 61115 上启动 Shadow-cljs - 观看构建：app [:app] 配置构建。 [:app] 编译...
当我开始使用 npx Shadow-cljs 手表应用程序时，它这么说
当我尝试启动服务器时，它说
SLF4J：未找到 SLF4J 提供程序。 SLF4J：默认为无操作（NOP）记录器实现 SLF4J：请参阅 https://www.slf4j.org/codes.html#noProviders 了解更多详细信息。
我认为它正在运行......
答案是，我实际上只是在另一个后端文件中遇到了不相关的问题，导致了 500 请求。如果有人有类似的问题，他们应该确保所有文件至少可以编译。