Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2020-06-24

Channels

#reagent
<
2020-06-24
>
ruben.hamers03:06:37

Hey guys, I got a quick question. I have made a reitit backend that runs on localhost:3000. Now I'm building a frontend with reagent that runs on localhost:8280. I'm trying to make http(ajax) requests to http://127.0.0.1:3000/apicall.... from my reagent frontend. however I keep getting failed requests. I think I forgot to setup some proxy settings or something. When I invoke the the same request through Insomnia it all works as exected.

David Pham04:06:06

Is it not CORS? Do you have the network logs from your browser?

Ruben.Hamers06:06:07

yeah could be, I also added some additional headers to the request, maybe they are incomplete

Ruben.Hamers06:06:55

keeps getting status 0 in the response as described in: https://github.com/Day8/re-frame-http-fx

Ruben.Hamers06:06:58

so yeah seems like CORS

p-himik07:06:42

Just look at the JS console - it should have all details. You cannot say anything by just "status 0" alone.

Ruben.Hamers07:06:22

I'll look for it tonight/tomorrow. cant look right now 😉 thx

ruben.hamers03:06:27

The console shows that the response is returned correctly,

ruben.hamers04:06:04

So I fixed it by installing an addon to my broswer (cors everywhere).

ruben.hamers04:06:19

I think it is a problem with my backend reitit app

ruben.hamers04:06:37

cant really find how to enable cors headers / middleware for all requests

victorb12:06:14

> So I fixed it by installing an addon to my broswer (cors everywhere). That sounds scary. Basically to get "CORS everywhere" to work you'd need to proxy all requests and add headers, which to me seems to indicate that all your traffic is now going through a middle-man. You should check the implementation of this extension before you continue with it

Ruben.Hamers12:06:49

I think I need to add some cors support to my reitit backend

Ruben.Hamers12:06:58

traced it down to it

victorb12:06:58

to enable CORS you'd just have to return a specific set of headers in your http requests. So setting Allow-Access-Control-Origin to localhost:8280 (frontend) should do the trick for GET requests at least

Ruben.Hamers12:06:18

my backend does not add them yet

Ruben.Hamers12:06:28

so ill check that 🙂

Ruben.Hamers12:06:43

at least i know the ajax calls are setup correctly now

victorb12:06:17

yeah, true. For the future: you can start Chrome with --disable-web-security to disable CORS checks, make sure you use a new profile + don't visit your bank and such with it disabled though.

Ruben.Hamers12:06:09

thx for the help;)

👌 3
ruben.hamers03:06:53

Alright; I think I have fixed it in the cleanest possible way: In my backend (reitit) I added a dependency to a package called: ring-cors, then I added a middleware handler that wraps the headers: 

(defn cors-wrapper
  [handler]
  (wrap-cors handler :access-control-allow-origin [#""]
             :access-control-allow-methods [:get :put :post :delete]))
and added this handler in the reitit middle ware section: 
:middleware [
                                ;; wrap cors headers
                                cors-wrapper
                                ;; swagger feature
                                swagger/swagger-feature

;; other middleware
.....
]

ruben.hamers03:06:16

just to wrap up the question 😉

👍 3
lepistane16:06:43

hello is it possible that some react native/react components will rerender only when setState is called and not otherwise? Are there any examples of reagent components using setState instead of ratoms?

David Pham18:06:24

You could check reagent 1.0 (alpha) documentation, especially the :f> keyword