anmonteiro / reason-graphql-fullstack

Fullstack Reason + GraphQL Todo List App
MIT License
245 stars 19 forks source link

Client - server port issue #11

Open DrYSG opened 4 years ago

DrYSG commented 4 years ago

Trivial question: (BTW, very nice project, this helps me a lot)

I see the the sample client tries to connect to http://localhost/public which is not where the server is located.

I tried changing the line in Loader.re to:

let sendQuery = q =>
  Bs_fetch.(
    fetchWithInit(
      "http://localhost:8080/graphql",
      RequestInit.make(

But my newbie knowledge of Bs_fetch is obviously flawed. Fidder reports that this is what is being sent:

OPTIONS http://localhost:8080/graphql HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://127.0.0.1:5500
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.87 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Referer: http://127.0.0.1:5500/public/index.html
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,he;q=0.8,yi;q=0.7
anmonteiro commented 4 years ago

https://github.com/anmonteiro/reason-graphql-fullstack/blob/6b6d19793bc2e4e16ac91e55686628a6a8fd6fd1/src/server/server.re#L98

The app should load in localhost:8080

DrYSG commented 4 years ago

I am not trying to be dense. (at least not deliberately, but I don't mind if you call me names :-) )

The server is starting in localhost:8080. I can see the graphiql interface, I can use insomnia to call against it, etc. and the mutations and queries all work fine.

I also see that when I edited line in Loader.re (in the client) as shown above - the server is logging to the console "/graphql" when the message arrives. (so there is connectivity).

What I did notice in with Fiddler is that post request packet had no body after I modified Loader.re

If I leave it (loader.re) alone, it does have a body, but then it sends the request to http://localhost/public/graphql (where there is no server)

So I think I am not editing Loader.re in the React client properly.

anmonteiro commented 4 years ago

I don't know what to tell you. I haven't touched this app in a while and it worked when I pushed it.

I'd encourage others to chime in if it's not working for them. I don't use Esy anymore so I can't double check if the setup works.

DrYSG commented 4 years ago

So let me chime in this:

  1. As far as I can tell the issue is purely a simple issue on the client side (not esy build, yarn built)
  2. The sample client uses fetchWithInit , with a first argument of "/graphql"
  3. that results in a call with no port,
  4. How does one modify the fetchWithInit to use a full url. (probably a question for someone in the https://github.com/reasonml-community/bs-fetch community. https://github.com/reasonml-community/bs-fetch/issues/30
DrYSG commented 4 years ago

@anmonteiro you mention you no longer use Esy, What was the problem, and what do you use now?

DrYSG commented 4 years ago

@anmonteiro ,

I found the problem. It is simple there is no header on the server to deal with the CORS issue:

Access to fetch at 'http://localhost:8080/graphql' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Do you know who I should ask about how to add header on the responses for CORS" is it Cohttp_lwt_unix or Cohttp_lwt_unix.Server