Nx单仓中Node.js GraphQL服务与React应用通信故障咨询

问题原因 #

你遇到的现象本质是Nx前端开发服务的代理规则配置问题：

• Nx创建React项目时默认会自动配置/api路径的代理规则，所有发往4200端口/api前缀的请求都会被自动转发到3333端口的后端服务，所以两个端口的/api都能正常返回数据。
• 你新增的/graphql路径不在默认的代理规则中，发往4200端口的/graphql请求会被前端开发服务当做静态资源处理，找不到对应资源就返回404错误。

解决方法 #

有两种常用的解决方案，推荐优先使用配置代理的方案：

方案1：修改Nx代理规则（推荐，无需改业务代码、无需配置跨域） #

1. 打开React项目对应的配置文件apps/totodile/project.json，找到serve配置块。
2. 在options中添加/修改proxyConfig字段，指向代理配置文件：

{
  "serve": {
    "executor": "@nrwl/web:dev-server",
    "options": {
      "buildTarget": "totodile:build",
      "proxyConfig": "apps/totodile/proxy.conf.json"
    }
  }
}

3. 在apps/totodile目录下新建proxy.conf.json文件，添加/graphql的代理规则：

{
  "/api": {
    "target": "http://localhost:3333",
    "secure": false
  },
  "/graphql": {
    "target": "http://localhost:3333",
    "secure": false
  }
}

4. 重启nx serve totodile命令，配置即可生效，原来的前端请求代码不需要任何修改就能正常请求/graphql接口。

方案2：直接请求完整后端地址 #

如果只是临时测试，可以直接把React中请求的地址改为完整的后端地址，同时需要给后端配置CORS跨域：

1. 后端安装cors依赖：npm i cors
2. 在express初始化代码中添加CORS配置：

import * as cors from 'cors';
app.use(cors());

3. 修改React中的请求地址：

fetch('http://localhost:3333/graphql', {
  // 原有请求参数保持不变
})

内容的提问来源于stack exchange，提问作者Aga