Coder Social home page Coder Social logo

Cross Origin Requests about crystal HOT 34 CLOSED

graphile avatar graphile commented on May 9, 2024 1
Cross Origin Requests

from crystal.

Comments (34)

estaub avatar estaub commented on May 9, 2024 8

For anyone else who struggles to understand... the CORS headers are now disabled by default, and enabled on the command line by --cors.

from crystal.

benjie avatar benjie commented on May 9, 2024 5

https://github.com/postgraphql/postgraphql/blob/master/docs/cli.md

postgraphql --cors -c postgres://...

from crystal.

jptissot avatar jptissot commented on May 9, 2024 2

I am trying to use graphql playground with postgraphile. Both are running on different origins (I am running postgraphile docker container on port 5000 and graphql-playground + my custom graphql api (using graphql-yoga) on port 4000.

The error I am having is that the playground sends OPTIONS requests to postgraphile, which seems to fail as the CORS rule is set to only allow HEAD, GET and POST.

image

Let me know if you need me to create a seperate issue.

from crystal.

pvdvreede avatar pvdvreede commented on May 9, 2024 1

I think it would be a useful feature to have cross origin support built in so that you dont also need to have a proxy for it. Rather than being enabled by default perhaps it would be better to have an option/cli flag to enable it so that people aren't exposing that without knowing it?

from crystal.

d-winter avatar d-winter commented on May 9, 2024

Any plan when this will be merged and released?

from crystal.

calebmer avatar calebmer commented on May 9, 2024

@d-winter I was waiting for a LGTM, Iโ€™ll merge ๐Ÿ˜‰

from crystal.

calebmer avatar calebmer commented on May 9, 2024

Released in 1.8.0 ๐Ÿ‘

from crystal.

d-winter avatar d-winter commented on May 9, 2024

@calebmer awesome timing ๐Ÿ‘
Thanks a lot!

from crystal.

ruslantalpa avatar ruslantalpa commented on May 9, 2024

Just looked into this for my needs so sharing the results ...

While this feature seems like a good idea at first (no proxy needed), you will add a network overhead on each request.
The first overhead is that you will need those headers on each request (not so bad).
The second overhead is that you will have preflight request for EVERY request.
Caching preflight requests does not really work http://stackoverflow.com/questions/12013216/how-to-apply-cors-preflight-cache-to-an-entire-domain

Do a bit more work and add the proxy (a real one like nginx, not a nodejs script) and you will make your app faster.

from crystal.

calebmer avatar calebmer commented on May 9, 2024

@ruslantalpa does this change with HTTP2 and/or hosting on the same domain?

Unless preflight requests seriously slow down request performance, Iโ€™m comfortable with leaving CORS on by default to simplify the beginner experience. But thatโ€™s a good optimization to be aware of, thanks so much ๐Ÿ‘

from crystal.

ruslantalpa avatar ruslantalpa commented on May 9, 2024

I don't know about the http2
Same domain means no need for CORS ... so no preflight (OPTIONS) requests, which means the headers are not needed at all and they just add (unused) bytes to traffic.
About slowdown .. yes they do, it's all nice when it's on localhost and the OPTIONS takes 5-10ms, but move this to production over https and suddenly a requests that would take 100ms in normal conditions, turns into 2 sequential requests, each taking 100ms so in total 200ms. Mix in Relay with it's preference for splitting requests into multiple requests to node endpoint and suddenly you have a flood.

from crystal.

DevPrasan1 avatar DevPrasan1 commented on May 9, 2024

Hi @estaub can you please tell me the command, for how to enable cors

from crystal.

pencilcheck avatar pencilcheck commented on May 9, 2024

Since I use expressjs as my custom server, so I just add npm install cors --save as a middleware to expressjs and done.

Yup it is for more control such as whitelist domains.

from crystal.

benjie avatar benjie commented on May 9, 2024

You can just use "enableCors" from the library settings (it's what "--cors" maps to) but using the cors middleware will give you more control ๐Ÿ‘

from crystal.

celvin avatar celvin commented on May 9, 2024

I'm trying to use it in Docker, and behind traefik in order to setup a domain name and manage ssl, but it can only be accessed though its IP, I'm using --cors and -n 0.0.0.0 and I can't access it though a reverse proxy :(

from crystal.

benjie avatar benjie commented on May 9, 2024

Could you post more details? What command are you running, whatโ€™s the error youโ€™re getting, how is your reverse proxy configured, etc etc?

from crystal.

celvin avatar celvin commented on May 9, 2024

Thanks a lot for your time, I have uploaded the testing environment to github, if you can check it out, I would be really grateful.

https://github.com/celvin/postgraphile-docker

I'm using traefik as a reverse proxy in order to use domain names to access different containers mapping their ports

Basically you just need to run docker-compose up --build and then you can navigate to the traefik dashboard to see the deployment details:

http://localdev.zlivio.com

and the postgraphile service (it's already routed to /graphiql) is using:

http://pgpgraph-local.zlivio.com/

and to enter to the graphile container:

docker exec -it postgraphile-nexxtel bash

from crystal.

benjie avatar benjie commented on May 9, 2024

I can't spin your env up right now, but what's the exact error you're getting?

from crystal.

celvin avatar celvin commented on May 9, 2024

There is no error in the log, and when I navigate directly to the container's IP, it works

but when I try to get it through a domain name managed by traefik (reverse proxy) it fails under timeout message.

If I post another node app in the same container it works well, so I think must be something related with allowing Cross Origin Requests or not

from crystal.

benjie avatar benjie commented on May 9, 2024

So a timeout implies it's not a CORS issue (those errors are explicit and typically immediate); sounds like it's a connectivity issue in your setup.

from crystal.

celvin avatar celvin commented on May 9, 2024

Mmm everything is possible, the thing is the same settings even the same container running another app works well through traefik but postgraphile doesn't...

from crystal.

benjie avatar benjie commented on May 9, 2024

I'm not familiar enough with Docker to be able to advise you there, sorry. Are you correctly exposing the port?

from crystal.

celvin avatar celvin commented on May 9, 2024

Thanks a lot for your support,

Yep I'm doing it well, I have had a similar issue with timeout trouble as well but with an angular 6 app, and I managed it adding --disable-host-check and listening 0.0.0.0 that's why I thought maybe the --cors option wasn't working well in postgraphil

For now I'll use it through IP but without ssl

Thanks for your time, this is a great project.

from crystal.

benjie avatar benjie commented on May 9, 2024

Are you using -n 0.0.0.0? We have this by default in our Dockerfile which you can install from graphile/postgraphile on Docker Hub.

from crystal.

celvin avatar celvin commented on May 9, 2024

Yep I have checked all the doc and that Docker file as well.

I have tried this:

  1. With connection plugin:
    postgraphile -n 0.0.0.0 --cors -c postgres://$POSTGRES_USER:$POSTGRES_PASSWORD@$PGHOST:$DB_PORT/$POSTGRES_DB -a -j -M --append-plugins /plugins/connection-filter/index.js

  2. without
    postgraphile -n 0.0.0.0 --cors -c postgres://$POSTGRES_USER:$POSTGRES_PASSWORD@$PGHOST:$DB_PORT/$POSTGRES_DB

It works if I navigate using the containers IP directly but not through the reverse proxy

from crystal.

benjie avatar benjie commented on May 9, 2024

Sorry, can't really help you - if it's a timeout then it's most likely a connectivity issue - the packets are literally not getting through (or getting back) - hence the timeout. Unless you think the server is hanging for some reason, but I've not known PostGraphile to hang except if you feed it a ridiculously complex GraphQL query ๐Ÿ˜ˆ

from crystal.

celvin avatar celvin commented on May 9, 2024

haha just to get the UI so nop, hehe

thanks a lot I'll try to get all debug that I can I will read carefully everything, thanks again.

from crystal.

celvin avatar celvin commented on May 9, 2024

I've found the trouble, the domain name wasn't working properly, my mistake, thanks it is working just perfect, I will keep alive that docker-compose wrapper for postgraphile, in case somebody wants to use it

from crystal.

benjie avatar benjie commented on May 9, 2024

๐Ÿ‘ Thanks for reporting back

from crystal.

avkonst avatar avkonst commented on May 9, 2024

Has the issue been created for the last comment: #84 (comment)

I have got the same problem.

from crystal.

benjie avatar benjie commented on May 9, 2024

I donโ€™t think so; please open one ๐Ÿ‘

from crystal.

benjie avatar benjie commented on May 9, 2024

So the bug is actually that we're sending Access-Control-Request-Method rather than Access-Control-Allow-Methods; not sure how this has never been spotted before! Raising a PR now.

from crystal.

benjie avatar benjie commented on May 9, 2024

#838

from crystal.

benjie avatar benjie commented on May 9, 2024

So the issue actually seems to be that they're setting an X-Apollo-Tracing header. I'm going to add that to the PR too, seems harmless.

from crystal.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.