I am learning how to use reagent clojure and I am creating a password management application with some basic crud operations as well. Right now when I try to delete a password or use my password generation function on the back end it is getting CORS requests failures no matter what I do. I will share my relevant back and front end functions and the error message.
Error message in the broser
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 }
Okay so here is my back end
(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]
[pwfunc :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
Okay and here is my relevant front end
(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]])])]]))
I can provide any further info necessary as well.
I tried making the POST request that has a delete function into a DELETE request and for some reason that I cannot figure out, when I do that it sends TWO failed requests back to me, so maybe that is a clue?
OPTIONS
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.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/remove-a-password. (Reason: CORS request did not succeed). Status code: (null).
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 }
That is the error with DELETE instead of post for remove-a-password. I am out of ideas…