Angular/Graphile & CORS

Question

我花了一天多的时间试图理解这一点。我正在从事一个新的爱好项目，想学习 GraphQL。这是我当前的设置：

服务器：

• PostGreSQL 数据库 (docker)
• Graphile 服务器（docker）
• 通过 docker-compose 配置，两个图像 运行 在同一台物理服务器上，但端口不同。

客户：

• Angular前端
• Apollo 客户端通过 apollo-angular 包
• 目前在开发中，所以 host = localhost

我可以毫无问题地通过邮递员给我的 API 打电话。但是当我 运行 来自客户端的代码时，我得到了预期的“Access-Control-Allow-Origin 不允许来源 http://localhost:4200”。错误。

这是我的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:

如您所见，我的服务器上启用了 CORS（通过 --cors 选项）。但是，错误仍然存​​在。老实说，我不知道如何调试或分析这个问题。 我的前端也需要配置吗？

Answer 1

我找到了解决问题的方法！

我发现在我的案例中 Access-Control-Allow-Origin 错误是由于我的浏览器阻止了对我的 API 的外向调用。我的终点从来没有达到过。所以服务器层面的任何配置都不应在问题解决的这个阶段进行。

我最后做的是在我的 Angular 应用程序中配置代理。

我的图形服务器正在侦听 http://xxx.xxx.xxx.xxx:xxxx/graphql 端点。

在我的 Angular 应用程序的源根目录中，我创建了一个名为 proxy.conf.json:

的文件

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

安全选项用于强制使用 SSL，我在这个开发阶段还没有。

为了将此配置用作代理，我将其添加到我的 angular.json:

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

然后重新启动我的 angular 项目，我现在能够到达我的 api 端点。

Graphile 中的 --cors 设置也不需要，所以我也删除了它。