角/石墨和CORS

编程问答 2022-06-11

问题描述

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

服务器：

  • PostGresql数据库（docker）
  • 石墨服务器（docker）
  • 通过docker-compose配置，两个映像都在同一台物理服务器上运行，但是端口不同。

客户：

  • 角形前端
  • 通过apollo-angular软件包的Apollo客户端
  • 当前在dev中，因此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选项）。但是，错误仍然存​​在。老实说，我不知道如何调试或分析此问题。 我是否还需要在前端配置某些东西？

解决方法

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

我发现在我的情况下，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设置，因此我也将其删除。

angularangulardockerdockerpostgraphile