Angular/Graphile & CORS

Question

I just spend more than a day trying to understand this. I'm working on a new hobby project and wanted to learn GraphQL. This is my current setup:

Server:

PostGreSQL db (docker)
Graphile server (docker)
configured via docker-compose, both images run on the same physical server, but have different ports.

Client:

Angular front end
Apollo client via apollo-angular package
currently in dev, so host = localhost

I can call my API via postman without problems. But when I run the code from my client, I get the expected "Origin http://localhost:4200 is not allowed by Access-Control-Allow-Origin." error.

This is my docker-compose.yml:

version: "3.3"
services:
    db:
        container_name: ccmm-postgres-dev
        restart: always
        image: ccmm-postgres-dev
        build:
            context: ./db
        volumes:
            - db:/var/lib/postgresql/data
        env_file:
            - ./.env
        networks:
            - network
        ports:
            - 5432:5432

    graphql:
        container_name: ccmm-graphql
        restart: always
        image: ccmm-graphql
        build:
            context: ./graphql
        env_file:
            - ./.env
        depends_on:
            - db
        networks:
            - network
        ports:
            - 5433:5433
        command:
            - --connection ${DATABASE_URL}
            - --watch
            - --dynamic-json
            - --no-ignore-rbac
            - --no-ignore-indexes
            - --show-error-stack=json
            - --extended-errors hint,detail,errcode
            - --graphiql /
            - --enhance-graphiql
            - --allow-explain
            - --port 5433
            - --cors
            - --schema ccmm_public
            - --jwt-secret ${JWT_SECRET}
            - --jwt-token-identifier ccmm_public.jwt_token
            - --default-role ccmm_guest
            - --append-plugins postgraphile-plugin-connection-filter

networks:
    network:

volumes:
    db:

So as you can see, CORS is enable on my server (via the --cors option). However, the error is still there. And to be honest I have no clue on how to debug or analyse this issue. Do I need to configure something in my frontend as well?

What’s the HTTP status code of the response? You can use the Network pane in browser devtools to check. If Chrome doesn’t show it to you, use the Network pane in Firefox devtools to check. Is it a 4xx or 5xx error rather than a 200 OK success response? — sideshowbarker, Oct 04 '20 at 12:39
I cannot find a status code. It looks like the call never got out in the first place. My browsers seems to have stopped it first. So maybe I need to look into the http service of angular and see if I can configure something there. — Wim Verhavert, Oct 05 '20 at 07:39

score 2 · Accepted Answer · answered Oct 05 '20 at 09:05

I found the solution to my problem!

I found that in my case the Access-Control-Allow-Origin error was due to my browser blocking the outward call to my API. My endpoint was never reached in the first place. So any configuration on the server level should not be done at this stage of the problem solving.

What I ended up doing is configuring a proxy in my Angular app.

My graphile server is listening on http://xxx.xxx.xxx.xxx:xxxx/graphql endpoint.

In the source root of my Angular app I created a file called proxy.conf.json:

{
    "/graphql": {
        "target": "http://xxx.xxx.xxx.xxx:xxxx",
        "secure": false,
        "logLevel": "debug"
    }
}

The secure option is used to enforce usage of SSL, which I don't have yet in this stage of development.

And to use this configuration as a proxy I added this to my angular.json:

...
 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "my-project:build",
            "proxyConfig": "src/proxy.conf.json"
          },
...

Then restarted my angular project and I was able to reach my api endpoint now.

The --cors setting in Graphile is also not needed, so I removed that as well.

Angular/Graphile & CORS

1 Answers1