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?

Answer 1

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.