1

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

服务器：

  • PostGreSQL 数据库（码头工人）
  • 图形服务器（docker）
  • 通过 docker-compose 配置，两个镜像都运行在同一个物理服务器上，但是有不同的端口。

客户：

  • 角前端
  • 通过 apollo-angular 包的 Apollo 客户端
  • 目前在 dev 中，所以 host = localhost

我可以毫无问题地通过邮递员调用我的 API。但是，当我从客户端运行代码时，我得到了预期的“Access-Control-Allow-Origin 不允许 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 选项）。但是，错误仍然存​​在。老实说，我不知道如何调试或分析这个问题。我还需要在前端配置一些东西吗？

4

1 回答 1

2

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

我发现在我的情况下 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"
    }
}

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.

于 2020-10-05T09:05:32.083 回答