Node.js 在开发模式localhost下从Next.js应用程序请求在不同端口上运行的Graphql api

我正在将现有应用程序从create react app切换到next.js， 除了我的api端点运行在端口4000上的另一个节点应用程序上之外，其他一切似乎都正常工作，我无法从next.js应用程序访问它。 我遵循回购协议中的例子，但我无法使其发挥作用， 在生产中，我使用nginx作为反向代理没有问题，但我处于开发模式。 对于使用Redux设置Apollo，我遵循了以下示例：对于proxy，我使用了以下示例

我知道，我做错了什么，我只是一时想不出来

在initApollo.js中

...    
function create() {
      return new ApolloClient({
        ssrMode: !process.browser,
        networkInterface: createNetworkInterface({
          uri: "/api" 
        })
      });
    }
...

在server.js中

...    
const devProxy = {
      "/api/": {
        target: "http://localhost:4000/api/",
        changeOrigin: true
      }
    };

    app
      .prepare()
      .then(() => {
        const server = express();

        if (dev && devProxy) {
          const proxyMiddleware = require('http-proxy-middleware')
          Object.keys(devProxy).forEach(function (context) {
            server.use(proxyMiddleware(context, devProxy[context]))
          })
        }

        server.all("*", (req, res) => handle(req, res));

        server.listen(3000, err => {
          if (err) throw err;
          console.log("> Ready on http://localhost:3000");
        });
      })
      .catch(ex => {
        console.error(ex.stack);
        process.exit(1);
      });

---

好的，我终于找到了问题，它与Next.js或Apollo客户端无关。但这一切都是关于我的服务器在端口4000上运行（我的graphql服务器）。我必须处理CORS和express middlware

express graphql

，我认为默认情况下不支持它

因此，我将以下内容添加到运行graphql的服务器中

app.use("/api", function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization, Content-Length, X-Requested-With"
  );
  if (req.method === "OPTIONS") {
    res.sendStatus(200);
  } else {
    next();
  }
});

在apollo客户端中，我还必须将absolut路径放在api服务器上

networkInterface: createNetworkInterface({
      uri: "http://localhost:4000/api/"
    })

---

就是这样

如果有人能提供教程或文章的链接，那也太好了